Q&A
ご回答ありがとうございます！
ご教示いただいた通り試したところ、問題なく動作しました。
助かりました！
心よりに感謝いたします！
ページ内にプルダウンメニューが3つ設置されており、
1つ目はページ切り替えのためのメニュー（左）で、
2つ目3つ目（中央、右）がページ内のリストをソートするメニューになっています。
こちらの左のページ切り替えは問題なく動作しているのですが、
中央、右のリストをソートするプルダウンメニューが、
Jqueryのバージョンを1.7.0から1.9.1にバージョンアップしたところ、
動作しなくなってしまいました。
こちらどこが原因かご教示いただけますでしょうか。
なおJqueryのバージョンを下げることは、他の箇所との兼ね合いでできません。
javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 2<script> 3$(function(){ 4 var str = ""; 5 var str2 = ""; 6 $('p#noresult').hide(); 7 $("select#type").change(function () { 8 $('p#noresult').hide(); 9 $('#feedList dt').hide(); 10 $('#feedList dd').hide(); 11 str = "." + $('select#type option:selected').val(); 12 str2 = "." + $('select#test option:selected').val(); 13 var num = ""; 14 if(str == "." && str2 == "."){ 15 $('#feedList dt').show(); 16 $('#feedList dd').show(); 17 } 18 else if(str == "."){ 19 $('#feedList dt' + str2).show(); 20 $('#feedList dd' + str2).show(); 21 } 22 else 23 { 24 $('#feedList dt' + str + str2).show(); 25 $('#feedList dd' + str + str2).show(); 26 } 27 num = $('#feedList dt:visible').length; 28 if(num == 0){ 29 $('p#noresult').show(); 30 } 31 }); 32 $("select#test").change(function () { 33 $('p#noresult').hide(); 34 $('#feedList dt').hide(); 35 $('#feedList dd').hide(); 36 str = "." + $('select#type option:selected').val(); 37 str2 = "." + $('select#test option:selected').val(); 38 var num2 = ""; 39 if(str == "." && str2 == "."){ 40 $('#feedList dt').show(); 41 $('#feedList dd').show(); 42 } 43 else if(str2 == "."){ 44 $('#feedList dt' + str).show(); 45 $('#feedList dd' + str).show(); 46 } 47 else 48 { 49 $("#feedList dt" + str + str2).show(); 50 $("#feedList dd" + str + str2).show(); 51 } 52 num2 = $("#feedList dt:visible").length; 53 if(num2 == 0){ 54 $('p#noresult').show(); 55 } 56 }); 57}); 58</script>
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<title></title> 5</head> 6<body> 7<main> 8<div id="section_filter"> 9<select name="year" id="year" onchange="document.location.href=this.options[this.selectedIndex].value;"> 10<option value="2017.html">2017</option> 11<option value="2016.htm">2016</option> 12<option value="2015.htm">2015</option> 13<option value="2014.htm">2014</option> 14</select> 15 16<select name="ct" id="type"> 17<option value="">全て</option> 18<option value="typeA">タイプA</option> 19<option value="typeB">タイプB</option> 20<option value="typeC">タイプC</option> 21</select> 22 23<select name="cp" id="test"> 24<option value="">全て</option> 25<option value="testA">テストA</option> 26<option value="testB">テストB</option> 27<option value="testC">テストC</option> 28</select> 29</div> 30 31<p id="noresult">該当する記事は見つかりませんでした。</p> 32<script type="text/javascript"> 33$(function(){ 34 var this_url = document.URL; 35 $('select#year').val(this_url); 36}); 37</script> 38<section> 39<dl id="feedList"> 40<dt class="typeA testA">xx年xx月xx日</dt><dd class="typeA testA"><a href="">タイプA＆テストA</a></dd> 41<dt class="typeA testB">xx年xx月xx日</dt><dd class="typeA testB"><a href="">タイプA＆テストB</a></dd> 42<dt class="typeA testC">xx年xx月xx日</dt><dd class="typeA testC"><a href="">タイプA＆テストC</a></dd> 43<dt class="typeB testA">xx年xx月xx日</dt><dd class="typeB testA"><a href="">タイプB＆テストA</a></dd> 44<dt class="typeB testB">xx年xx月xx日</dt><dd class="typeB testB"><a href="">タイプB＆テストB</a></dd> 45<dt class="typeB testC">xx年xx月xx日</dt><dd class="typeB testC"><a href="">タイプB＆テストC</a></dd> 46<dt class="typeA testA">xx年xx月xx日</dt><dd class="typeA testA"><a href="">タイプA＆テストA</a></dd> 47<dt class="typeA testB">xx年xx月xx日</dt><dd class="typeA testB"><a href="">タイプA＆テストB</a></dd> 48<dt class="typeA testC">xx年xx月xx日</dt><dd class="typeA testC"><a href="">タイプA＆テストC</a></dd> 49<dt class="typeB testA">xx年xx月xx日</dt><dd class="typeB testA"><a href="">タイプB＆テストA</a></dd> 50<dt class="typeB testB">xx年xx月xx日</dt><dd class="typeB testB"><a href="">タイプB＆テストB</a></dd> 51<dt class="typeB testC">xx年xx月xx日</dt><dd class="typeB testC"><a href="">タイプB＆テストC</a></dd> 52</dl> 53</section> 54</main> 55</body> 56</html> 57コード
HTML、CSSはそこそこわかるのですが、
JSに関しては初心者のため、簡単にわかるご説明をご教示いただければ幸いです。
よろしくお願いいたします。
回答3件
0
いちおうサンプル
javascript
1$(function(){ 2 $('select#type,select#test').on('change',function () { 3 var val1=$('select#type').val(); 4 var val2=$('select#test').val(); 5 var selector=""; 6 if(val1!=="") selector+="."+val1; 7 if(val2!=="") selector+="."+val2; 8 if(selector=="") selector="*"; 9 $('#feedList dt,#feedList dd').filter(selector).show(); 10 $('#feedList dt,#feedList dd').not(selector).hide(); 11 var len=$('#feedList dt').filter(selector).length; 12 $('#noresult').toggle(len==0); 13 }).change(); 14}); 15 16
投稿2017/02/14 13:53
総合スコア114747
0
noConflict()というメソッドを利用して、Jquery2つを共存させてみてはどうでしょうか？
http://webnonotes.com/javascript-2/jquery-noconflict/
JavaScript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 2<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 3 4 5<script type="text/javascript"> 6 var $170 = $.noConflict(true); 7 8 (function($){ 9 10//ver1.9.1の内容を記入 11console.info("ver = " + $.fn.jquery);//確認用 12 })(jQuery); 13 14 (function($){ 15 $(function(){ 16 17//ver1.7.0の内容を記入 18$(function(){ 19 var str = ""; 20 var str2 = ""; 21 $('p#noresult').hide(); 22 23//console.info("ver = " + $.fn.jquery);//確認用 24 $("select#type").change(function () { 25 $('p#noresult').hide(); 26 $('#feedList dt').hide(); 27 $('#feedList dd').hide(); 28 str = "." + $('select#type option:selected').val(); 29 str2 = "." + $('select#test option:selected').val(); 30 var num = ""; 31 if(str == "." && str2 == "."){ 32 $('#feedList dt').show(); 33 $('#feedList dd').show(); 34 } 35 else if(str == "."){ 36 $('#feedList dt' + str2).show(); 37 $('#feedList dd' + str2).show(); 38 } 39 else 40 { 41 $('#feedList dt' + str + str2).show(); 42 $('#feedList dd' + str + str2).show(); 43 } 44 num = $('#feedList dt:visible').length; 45 if(num == 0){ 46 $('p#noresult').show(); 47 } 48 }); 49 $("select#test").change(function () { 50 $('p#noresult').hide(); 51 $('#feedList dt').hide(); 52 $('#feedList dd').hide(); 53 str = "." + $('select#type option:selected').val(); 54 str2 = "." + $('select#test option:selected').val(); 55 var num2 = ""; 56 if(str == "." && str2 == "."){ 57 $('#feedList dt').show(); 58 $('#feedList dd').show(); 59 } 60 else if(str2 == "."){ 61 $('#feedList dt' + str).show(); 62 $('#feedList dd' + str).show(); 63 } 64 else 65 { 66 $("#feedList dt" + str + str2).show(); 67 $("#feedList dd" + str + str2).show(); 68 } 69 num2 = $("#feedList dt:visible").length; 70 if(num2 == 0){ 71 $('p#noresult').show(); 72 } 73 }); 74}); 75 76 77 78 }); 79 })($170); 80</script> 81
投稿2017/02/14 13:32
総合スコア53
0
ベストアンサー
こんにちは。
まず、バージョン関係なくですが、
中･右プルダウン２つの表示・非表示に対して、
分岐のパターンは４つが正しいのではないでしょうか。
JavaScript
1// ① 中プルダウン: 全て、右プルダウン: 全て 2if(str == "." && str2 == "."){ 3 $('#feedList dt').show(); 4 $('#feedList dd').show(); 5} 6// ② 中プルダウン: 全て、右プルダウン: テストA, B, ... 7else if(str == "."){ 8 $('#feedList dt' + str2).show(); 9 $('#feedList dd' + str2).show(); 10} 11/* ↓ここが必要？ 12// ③ 中プルダウン: タイプA, B, ...、右プルダウン: 全て 13else if(str2 == "."){ 14 $('#feedList dt' + str).show(); 15 $('#feedList dd' + str).show(); 16} 17*/ 18// ④ 中プルダウン: タイプA, B, ...、右プルダウン: テストA, B, ... 19else 20{ 21 $('#feedList dt' + str + str2).show(); 22 $('#feedList dd' + str + str2).show(); 23}
③の分岐がないため「中プルダウン: タイプA, B, ...、右プルダウン: 全て」のケースが④の分岐に流れています。
その結果、例えば「$('#feedList dt.typeA.')」を呼ぶ時にエラーとなります。
1.7.0のバージョンでは「$('#feedList dt.typeA.')」が許容（#feedList dt.typeA.[任意]の要素）されていましたが、
1.9.1のバージョンでは「$('#feedList dt.typeA.')」がエラーになるみたいですね。
投稿2017/02/14 13:26
編集2017/02/14 13:37
総合スコア91
補足です。
私の回答は「$("select#type").change」内のみ言及していますが、
｢$("select#test").change」内についても同様です。
｢$("select#test").change」内の方はエラーにはなりませんが、
付けておいた方が良いと思います。
$("select#test")の方がエラーにならないのは、
$("#feedList dt..testA")が許容されているからです。
では頑張ってください！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。