Q&A前提
現在、ポートフォリオサイト制作で、日本語と英語を切り替えられる機能を実装しようとしています。
使用言語は以下の通りです。
・HTML5 + CSS3
・jQuery
実現したいこと
・未選択、あるいは日本語選択で日本語表記
・英語選択で英語表記
上記の切り替え機能を実装したいです。
発生している問題・エラーメッセージ
・jQueryにてコードを記入したが、全く変化が起きない
・そもそもjQueryが適切に読み込めているのかも不明
該当のソースコード
コードを以下に記します。
HTML
1<html> 2 <body> 3 4 <!-- 中略 --> 5 6 <div class = "language-select"> 7 <lebel> 8 <select name = "lang-select"> 9 <option selected value = "0">- 言語選択 -</option> 10 <option value = "1">日本語</option> 11 <option value = "2">English</option> 12 </select> 13 </lebel> 14 </div> 15 16 <div> 17 <div class = "japanese"> 18 <p>日本語</p> 19 </div> 20 <div class = "english"> 21 <p>英語</p> 22 </div> 23 </div> 24 25 <script type = "text/javascript" src = "js/jquery-3.6.0.min.js"></script> 26 <script type = "text/javascript" src = "js/bootstrap.js"></script> 27 <script type = "text/javascript" src = "js/script.js"></script> 28 29 </body> 30</html>
CSS
1.language-hide { 2 visibility: hidden; 3}
jQuery
1let val = $("[name = "lang-select"]").val(); 2 3//Language Select 4$("[name = lang-select]").change(function() { 5 if (val == 1) { 6 $('.japanese').show(); 7 $('.english').hide(); 8 } else if (val == 2) { 9 $('.japanese').hide(); 10 $('.english').show(); 11 } else { 12 $('.japanese').show(); 13 $('.english').hide(); 14 } 15});
試したこと
jQueryを下記のように書き換えても動作しない。
jQuery
1let val = $("[name = "lang-select"]").val(); 2 3//Language Select 4$("[name = lang-select]").change(function() { 5 if (val == 1) { 6 $('html').find('english').addClass('language-hide'); 7 $('html').find('japanese').removeClass('language-hide'); 8 } else if (val == 2) { 9 $('html').find('japanese').addClass('language-hide'); 10 $('html').find('english').removeClass('language-hide'); 11 } else { 12 $('html').find('english').addClass('language-hide'); 13 $('html').find('japanese').removeClass('language-hide'); 14 } 15});
補足情報（FW/ツールのバージョンなど）
上記コードに問題がある場合、ご指摘抱ければ幸いです。
よろしくお願い致します。
回答2件
0
ベストアンサー
上記コードに問題がある場合、ご指摘抱ければ幸いです。
シンタックスハイライトをつければ、問題点は明らかです。
js
1let val = $("[name = "lang-select"]").val();
文字列の途中に引用符を入れているために、文字列が途中で終わってしまっています。
投稿2022/08/05 11:26
総合スコア145184
0
@maisumakun様
ご指摘ありがとうございます。
なるほど、分かりやすい解説をありがとうございました！
早速、修正してみたいと思います。
投稿2022/08/05 14:22
総合スコア50
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。