質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

teraterahyuuuu
teraterahyuuuu

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

0クリップ

168閲覧

投稿2022/11/11 04:19

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に詳しくなくこれ以上解決の方法がわかりませんでした。

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

0

ベストアンサー

私の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}

その後もURLを記号で区切って配列に格納して、その配列を利用してどのタブを開くかという判別をおこなっているみたいですね。
初めてタブ切り替えを実装するには複雑すぎてあまりいい見本ではないように思います。

ほかのタブ切り替えのコードを見本にすることをお勧めします。

投稿2022/11/11 06:21

Cocode

総合スコア2098

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

teraterahyuuuu

2022/11/11 06:33

ご丁寧にありがとうございます。 元のURLを基準にして処理を実行しているんですね。 仕組みはわかりましたが、こちらの方に落とし込むのは複雑で 私にはまだ手を付けるのには早いですね(^^; 諦めて別のものを参考にしようと思います。 ありがとうございました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。