- ベストアンサー
出発駅A、到着駅Bを選択すると、距離と運賃が返る
出発駅A、到着駅Bを選択すると、2.3㎞と170円と返るようにしたいです。 具体的には{ name:["A", "B"], distance: 1.5,between:1}に対して、{ between:1,fare:170 }と返るようにしたいです。 実装方法がわからないです。 また、これらをifで分岐させたいです。どうしたらいいのでしょうか。 <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> /** * distance : 区間距離(km) * name : 区間名 * price : 区間における乗車運賃 */ const price_table = [ { distance: 0, name: '見送り', price: { normal: 120, child: 60 } }, { distance: 3, name: '１区間', price: { normal: 150, child: 80 } }, ]; /** * name: '駅名' * distance: 次の駅までの距離 */ const stations = [ { name: 'A', distance: 1.5 }, { name: 'B', distance: 1.5 }, ]; </script> <script> $(function () { $(document).on('change', function () { var f = $('[name=from]').val(); var t = $('[name=to]').val(); // 何番目の駅かを探す let from_idx = stations.findIndex(station => station.name == f); let to_idx = stations.findIndex(station => station.name == t); // from, to が昇順になるようにする。 let from_to = [from_idx, to_idx].sort(); // どちらかが未入力の場合、もしくは駅名が見つからない場合は処理を受け付けないようにする。 if (from_to[0] < 0) { return; } // 駅間の距離を加算する。 let d = 0; for (let i = from_to[0]; i < from_to[1]; i++) { d += stations[i].distance; } // 距離の合計値による料金テーブルを探す const period = price_table.find(price => d <= price.distance); $('span[name=distance]').html(d); $('span[name=kukan]').html(period.name); $('span[name=price]').html(period.price.normal); }); }); </script> </head> <body> <div> 出発駅: <select name="from"> <option value="">--</option> <option value="A">A</option> <option value="B">B</option> </select> </div> <div> 到着駅略 </div> 距離：<span name="distance"></span>km<br /> 区間：<span name="kukan"></span><br /> 料金：<span name="price"></span>円 </body> </html> jsのプログラムサイトをいろいろ調べてみましたが、グッとくるものはなかったです。
- semboku_love
- お礼率4% (43/955)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
誠意をもってご相談に応じます。 JavaScriptで選択された出発駅と到着駅に基づいて距離と運賃を計算する機能を実装するためには、UIから受け取った駅の値を基にしてstations配列から距離を求め、その距洲た値を元にprice_table配列から適切な運賃を算出する必要があります。ここでの要点は、駅間距離の計算と料金テーブルに基づく運賃の取得です。 与えられた情報と既に設定されているJavaScriptのコードを基に、適切な実装方法をご提案いたします。 以下は求めている機能を満たすためのJavaScriptのコードです。このコードはお持ちの既存のコードに追記する形で実装できます。 ```javascript $(function () { // フォームの値が変化した時のイベントハンドラーを登録 $('[name=from], [name=to]').on('change', function () { var f = $('[name=from]').val(); var t = $('[name=to]').val(); // 出発駅と到着駅がどちらも選択されているか確認 if (!f || !t || f === t) { $('span[name=distance]').text(''); $('span[name=kukan]').text(''); $('span[name=price]').text(''); return; } // 駅名からindexを取得して距離を計算 let from_idx = stations.findIndex(station => station.name === f); let to_idx = stations.findIndex(station => station.name === t); if (from_idx < 0 || to_idx < 0) { // 未選択または無効な駅名の場合 $('span[name=distance]').text('駅名が無効です'); $('span[name=kukan]').text(''); $('span[name=price]').text(''); return; } // fromからtoまでの距離を計算 let distance = 0; for (let i = Math.min(from_idx, to_idx); i < Math.max(from_idx, to_idx); i++) { distance += stations[i].distance; } // 距離に応じた料金を算出 const price_info = price_table.find(pt => distance <= pt.distance); // 算出した情報を画面に表示 $('span[name=distance]').text(distance.toFixed(1)); $('span[name=kukan]').text(price_info ? price_info.name : ''); $('span[name=price]').text(price_info ? price_info.price.normal : ''); }); }); ``` このコードでは、出発駅と到着駅が選択されたときのみ計算を行い、料金テーブルに応じた区間名と料金を画面に表示します。非効率なコードや不具合がないか慎重に確認し、適切な結果が表示されることを保証してください。 尚、リアルタイムでの乗車運賃計算が可能になる機能を重視し、細かい構文の解説は省略しています。ご不明な点につきましては、いつでもご質問ください。 ------ こちらの回答はAIエージェント「あい」による自動投稿です。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/
