https://povo.jp/cms/povo/js/modules/_loaming.js

1export const loaming = () => {
2  let conditionCount = 1;
3  let $condition = $(".js-loaming-condition").first();
4  let $addCondition = $(".js-loaming-addcondition");
5  let $conditionSubmit = $(".js-loaming-submit");
6  let $result = $(".js-loaming-result").first(); // 最初の結果ブロックを取得
7  let $resultClone = $result.clone()
8
9  $result.remove();
10
11  // 追加ボタンをクリックすると `.js-loaming-condition` を追加
12  $addCondition.on("click", function (e) {
13    e.preventDefault();
14    conditionCount++;
15
16    let $newCondition = $condition.clone();
17    $newCondition.find("input[type='radio']").each(function (index) {
18      let newId = `area${conditionCount}-${index+1}`;
19      $(this).attr("id", newId);
20      $(this).next("label").attr("for", newId);
21      $(this).prop("checked", false);
22    });
23
24    // `name` を `area-conditionCount` に変更（ラジオボタンを独立）
25    $newCondition.find("input[type='radio']").attr("name", `area-${conditionCount}`);
26
27    $newCondition.find(".js-loaming-country").empty().append('<option value="">-- 渡航先を選択してください --</option>');
28
29    // 削除ボタンを追加
30    $newCondition.append("<button class='js-loaming-remove_condition'>削除</button>");
31
32    $(".js-loaming-condition").last().after($newCondition);
33  });
34
35  // 削除ボタンをクリックすると `.js-loaming-condition` を削除
36  $(document).on("click", ".js-loaming-remove_condition", function () {
37    $(this).closest(".js-loaming-condition").remove();
38  });
39
40  // 地域選択時に、該当する国をセレクトボックスに追加
41  $(document).on("change", ".js-loaming-area-radio", function () {
42    let selectedRegion = $(this).val();
43    let $conditionBlock = $(this).closest(".js-loaming-condition");
44    let $select = $conditionBlock.find(".js-loaming-country");
45
46    $select.empty().append('<option value="">-- 渡航先を選択してください --</option>');
47
48    countries.forEach(country => {
49      if (country.region === selectedRegion) {
50        $select.append(`<option value="${country.country_id}">${country.country_name}</option>`);
51      }
52    });
53  });
54
55  // 検索ボタンクリック時に結果を表示（既存結果を削除）
56  $(document).on("click", ".js-loaming-submit", function () {
57    // 検索結果をクリア
58    $(".js-loaming-results").empty();
59
60    $(".js-loaming-condition").each(function () {
61      let $conditionBlock = $(this);
62      let selectedCountryId = $conditionBlock.find(".js-loaming-country").val()?.trim();
63      let selectedCountry = countries.find(c => c.country_id === selectedCountryId);
64
65      if (!selectedCountry) {
66        alert("選択した国のデータが見つかりません");
67        return;
68      }
69
70      let $newResult = $result.clone().removeClass('u-hide');
71      $newResult.find(".js-loaming-region span").text(selectedCountry.region);
72      $newResult.find(".js-loaming-country_name span").text(selectedCountry.country_name);
73      $newResult.find(".js-loaming-data_result").text(selectedCountry.data_result);
74      $newResult.find(".js-loaming-regular_topping").text(selectedCountry.regular_topping);
75      $newResult.find(".js-loaming-area_topping").text(selectedCountry.area_topping);
76      $newResult.find(".js-loaming-wide_topping").text(selectedCountry.wide_topping);
77      $newResult.find(".js-loaming-call_sms").text(selectedCountry.call_sms);
78      $newResult.find(".js-loaming-outgoing_1").text(selectedCountry.outgoing_1);
79      $newResult.find(".js-loaming-outgoing_2").text(selectedCountry.outgoing_2);
80      $newResult.find(".js-loaming-outgoing_3").text(selectedCountry.outgoing_3);
81      $newResult.find(".js-loaming-incoming").text(selectedCountry.incoming);
82      $newResult.find(".js-loaming-sms_send").text(selectedCountry.sms_send);
83      $newResult.find(".js-loaming-sms_receive").text(selectedCountry.sms_receive);
84
85      $(".js-loaming-results").append($newResult);
86
87      let winH = document.documentElement.clientHeight
88      let targetY = $(".js-loaming-results").offset().top
89

90      let position = targetY - $('.p-header').height();
91
92      $('body,html').stop(true,false).animate({ scrollTop: position }, 300, 'swing');
93    });
94  });
95
96}