タブパネルで下部が切り替わり、タブ部分がレスポンシブでスライダーに切り替わる仕様がスライダーに切り替わらない。JSのsplitメソッドの問題？

JSにあまり詳しくなく、恐縮ですがご質問です。

https://www.shinnihonjusetsu.co.jp/service00/?service=1
こちらのページを参考にタブごとに下部要素が切り替わるサイトを作成中です。

レスポンシブでスマホサイズで上部のタブパネルがslickスライダーに切り替わる仕様です。

正常に動作している上記サイトのコードをそのままコピペして試しているのですが、スマホサイズでスライダーに切り替わらず、consoleで下記のエラーが出ます。

(index):482 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at HTMLDocument.<anonymous> ((index):482:24)
    at j (jquery.min.js:2:27136)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:27949)
    at Function.ready (jquery.min.js:2:29783)
    at HTMLDocument.K (jquery.min.js:2:30128)

下記は該当箇所に当たるjsのコードです。


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="https://www.jungleocean.com/demo/jquery-slick/js/slick.min.js"></script>
    
<script>
  $('.tab_box .tab_btn').click(function () {
  index = $('.tab_box .tab_btn').index(this);
  dd = $('.box04_list dd').index(this);
  $('.tab_box .tab_btn, .tab_box .tab_panel, .box04_list dd').removeClass('active');
  $(this).addClass('active');
  $('.tab_box .tab_panel').eq(index).addClass('active');
  $('.box04_list dd').eq(index).addClass('active');
});
$('.box04_list dl').click(function () {
  index = $('.box04_list dl').index(this);
  dd = $('.box04_list dd').index(this);
  tabbtn = $('.tab_box .tab_btn').index(this);
  $('.tab_box .tab_btn, .tab_box .tab_panel, .box04_list dd').removeClass('active');
  $(this).addClass('active');
  $('.tab_box .tab_panel').eq(index).addClass('active');
  $('.box04_list dd').eq(index).addClass('active');
  $('.tab_box .tab_btn').eq(index).addClass('active');
});

$(function () {
var url   = location.href;
params    = url.split("?");
spparams   = params[1].split("&");
var paramArray = [];
for ( i = 0; i < spparams.length; i++ ) {
    vol = spparams[i].split("=");
    paramArray.push(vol[0]);
    paramArray[vol[0]] = vol[1];
}
    $('.tab_box .tab_btn, .tab_box .tab_panel, .box04_list dd').removeClass('active');

if ( paramArray["service"] == "1") {
    $('.box04_list dl.s01 dd').addClass('active');
    $('.tab_box .tab_btn.s01').addClass('active');
    $('.tab_box .tab_panel.s01').addClass('active');
} else if ( paramArray["service"] == "2") {
    $('.box04_list dl.s02 dd').addClass('active');
    $('.tab_box .tab_btn.s02').addClass('active');
    $('.tab_box .tab_panel.s02').addClass('active');
} else if ( paramArray["service"] == "3") {
    $('.box04_list dl.s03 dd').addClass('active');
    $('.tab_box .tab_btn.s03').addClass('active');
    $('.tab_box .tab_panel.s03').addClass('active');
} else if ( paramArray["service"] == "4") {
    $('.box04_list dl.s04 dd').addClass('active');
    $('.tab_box .tab_btn.s04').addClass('active');
    $('.tab_box .tab_panel.s04').addClass('active');
} else if ( paramArray["service"] == "5") {
    $('.box04_list dl.s05 dd').addClass('active');
    $('.tab_box .tab_btn.s05').addClass('active');
    $('.tab_box .tab_panel.s05').addClass('active');
} else if ( paramArray["service"] == "6") {
    $('.box04_list dl.s06 dd').addClass('active');
    $('.tab_box .tab_btn.s06').addClass('active');
    $('.tab_box .tab_panel.s06').addClass('active');
}
  function sliderSetting() {
    var width = $(window).width();
    if (width <= 750) {
      $('.box04_list').slick({
        dots: true,
        arrows: true,
        prevArrow: '<button class="slide-arrow prev-arrow"></button>',
        nextArrow: '<button class="slide-arrow next-arrow"></button>',
        asNavFor: '.panel_area',
        centerMode: true,
        centerPadding: '10%'
      });
      $('.panel_area').slick({
        dots: false,
        adaptiveHeight: true,
        arrows: false,
        asNavFor: '.box04_list'
      });
      
if ( paramArray["service"] == "1") {
    $('.box04_list').slick('slickGoTo', 0, true);
    $('.panel_area').slick('slickGoTo', 0, true);
} else if ( paramArray["service"] == "2") {
    $('.box04_list').slick('slickGoTo', 1, true);
    $('.panel_area').slick('slickGoTo', 1, true);
} else if ( paramArray["service"] == "3") {
    $('.box04_list').slick('slickGoTo', 2, true);
    $('.panel_area').slick('slickGoTo', 2, true);
} else if ( paramArray["service"] == "4") {
    $('.box04_list').slick('slickGoTo', 3, true);
    $('.panel_area').slick('slickGoTo', 3, true);
} else if ( paramArray["service"] == "5") {
    $('.box04_list').slick('slickGoTo', 4, true);
    $('.panel_area').slick('slickGoTo', 4, true);
} else if ( paramArray["service"] == "6") {
    $('.box04_list').slick('slickGoTo', 5, true);
    $('.panel_area').slick('slickGoTo', 5, true);
}
    } else {
      $('.box04_list.slick-initialized').slick('unslick');
    }
  }
  sliderSetting();
  $(window).resize(function () {
    sliderSetting();
  });
});

    </script>

splitのメソッドに問題で、文字列で指定する必要があることまではわかったのですが、JSに詳しくなくこれ以上解決の方法がわかりませんでした。

お詳しい方に教えていただけますと幸いです。

Cocode

2022/11/11 05:51

(index):482 Uncaught TypeError: Cannot read properties of undefined (reading 'split') 482行目にエラーがでているとのことですが、482行目とはどこですかー？

teraterahyuuuu

2022/11/11 05:56

ご連絡ありがとうございます。 spparams = params[1].split("&"); こちらが482行目のコードです。念のためその周りのコードもお送りします。 $(function () { var url = location.href; params = url.split("?"); spparams = params[1].split("&"); var paramArray = []; for ( i = 0; i < spparams.length; i++ ) { vol = spparams[i].split("="); paramArray.push(vol[0]); paramArray[vol[0]] = vol[1]; } 何卒よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

私のQ.

482行目にエラーがでているとのことですが、482行目とはどこですかー？

質問者様のA.

spparams = params[1].split("&");
こちらが482行目のコードです。

不具合の原因

質問者様はおそらくローカル環境でブラウザに表示してページを確認してると思うんですけども、見本のサイトと質問者様のURLの違いでエラーが起きています。

見本のサイトのURLって
- https://www.shinnihonjusetsu.co.jp/service00/?service=1 なんですけど、
JSのこの部分は、params = url.split("?");
- params = ['https://www.shinnihonjusetsu.co.jp/service00/', 'service=1']
- ↑こういう配列ができてるんですね。
で、次の行で、spparams = params[1].split("&"); これは
- spparams = 'service=1'.split('&')ってことなんですけど、
- 質問者様のローカル環境だとURLに?がないので、配列の[1]番目は存在しないから、params[1]は存在しないから.split()使えませんというエラーになっています。

javascript
1$(function () {
2var url   = location.href; // 現在地のURLを取得
3params    = url.split("?"); // URLを「?」で区切って配列に格納
4spparams   = params[1].split("&"); // ↑の配列の[1]番目を「&」で区切って別の配列に格納
5var paramArray = [];
6for ( i = 0; i < spparams.length; i++ ) {
7    vol = spparams[i].split("=");
8    paramArray.push(vol[0]);
9    paramArray[vol[0]] = vol[1];
10}