ページ内にプルダウンメニューが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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。