Jqueryのバージョンアップでプルダウンメニューが動作しなくなってしまいました
解決済
回答 3
投稿
- 評価
- クリップ 0
- VIEW 786
ページ内にプルダウンメニューが3つ設置されており、
1つ目はページ切り替えのためのメニュー（左）で、
2つ目3つ目（中央、右）がページ内のリストをソートするメニューになっています。
こちらの左のページ切り替えは問題なく動作しているのですが、
中央、右のリストをソートするプルダウンメニューが、
Jqueryのバージョンを1.7.0から1.9.1にバージョンアップしたところ、
動作しなくなってしまいました。
こちらどこが原因かご教示いただけますでしょうか。
なおJqueryのバージョンを下げることは、他の箇所との兼ね合いでできません。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var str = "";
var str2 = "";
$('p#noresult').hide();
$("select#type").change(function () {
$('p#noresult').hide();
$('#feedList dt').hide();
$('#feedList dd').hide();
str = "." + $('select#type option:selected').val();
str2 = "." + $('select#test option:selected').val();
var num = "";
if(str == "." && str2 == "."){
$('#feedList dt').show();
$('#feedList dd').show();
}
else if(str == "."){
$('#feedList dt' + str2).show();
$('#feedList dd' + str2).show();
}
else
{
$('#feedList dt' + str + str2).show();
$('#feedList dd' + str + str2).show();
}
num = $('#feedList dt:visible').length;
if(num == 0){
$('p#noresult').show();
}
});
$("select#test").change(function () {
$('p#noresult').hide();
$('#feedList dt').hide();
$('#feedList dd').hide();
str = "." + $('select#type option:selected').val();
str2 = "." + $('select#test option:selected').val();
var num2 = "";
if(str == "." && str2 == "."){
$('#feedList dt').show();
$('#feedList dd').show();
}
else if(str2 == "."){
$('#feedList dt' + str).show();
$('#feedList dd' + str).show();
}
else
{
$("#feedList dt" + str + str2).show();
$("#feedList dd" + str + str2).show();
}
num2 = $("#feedList dt:visible").length;
if(num2 == 0){
$('p#noresult').show();
}
});
});
</script><!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
</head>
<body>
<main>
<div id="section_filter">
<select name="year" id="year" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="2017.html">2017</option>
<option value="2016.htm">2016</option>
<option value="2015.htm">2015</option>
<option value="2014.htm">2014</option>
</select>
<select name="ct" id="type">
<option value="">全て</option>
<option value="typeA">タイプA</option>
<option value="typeB">タイプB</option>
<option value="typeC">タイプC</option>
</select>
<select name="cp" id="test">
<option value="">全て</option>
<option value="testA">テストA</option>
<option value="testB">テストB</option>
<option value="testC">テストC</option>
</select>
</div>
<p id="noresult">該当する記事は見つかりませんでした。</p>
<script type="text/javascript">
$(function(){
var this_url = document.URL;
$('select#year').val(this_url);
});
</script>
<section>
<dl id="feedList">
<dt class="typeA testA">xx年xx月xx日</dt><dd class="typeA testA"><a href="">タイプA＆テストA</a></dd>
<dt class="typeA testB">xx年xx月xx日</dt><dd class="typeA testB"><a href="">タイプA＆テストB</a></dd>
<dt class="typeA testC">xx年xx月xx日</dt><dd class="typeA testC"><a href="">タイプA＆テストC</a></dd>
<dt class="typeB testA">xx年xx月xx日</dt><dd class="typeB testA"><a href="">タイプB＆テストA</a></dd>
<dt class="typeB testB">xx年xx月xx日</dt><dd class="typeB testB"><a href="">タイプB＆テストB</a></dd>
<dt class="typeB testC">xx年xx月xx日</dt><dd class="typeB testC"><a href="">タイプB＆テストC</a></dd>
<dt class="typeA testA">xx年xx月xx日</dt><dd class="typeA testA"><a href="">タイプA＆テストA</a></dd>
<dt class="typeA testB">xx年xx月xx日</dt><dd class="typeA testB"><a href="">タイプA＆テストB</a></dd>
<dt class="typeA testC">xx年xx月xx日</dt><dd class="typeA testC"><a href="">タイプA＆テストC</a></dd>
<dt class="typeB testA">xx年xx月xx日</dt><dd class="typeB testA"><a href="">タイプB＆テストA</a></dd>
<dt class="typeB testB">xx年xx月xx日</dt><dd class="typeB testB"><a href="">タイプB＆テストB</a></dd>
<dt class="typeB testC">xx年xx月xx日</dt><dd class="typeB testC"><a href="">タイプB＆テストC</a></dd>
</dl>
</section>
</main>
</body>
</html>
コード
HTML、CSSはそこそこわかるのですが、
JSに関しては初心者のため、簡単にわかるご説明をご教示いただければ幸いです。
よろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+3
いちおうサンプル
$(function(){
$('select#type,select#test').on('change',function () {
var val1=$('select#type').val();
var val2=$('select#test').val();
var selector="";
if(val1!=="") selector+="."+val1;
if(val2!=="") selector+="."+val2;
if(selector=="") selector="*";
$('#feedList dt,#feedList dd').filter(selector).show();
$('#feedList dt,#feedList dd').not(selector).hide();
var len=$('#feedList dt').filter(selector).length;
$('#noresult').toggle(len==0);
}).change();
});投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+2
こんにちは。
まず、バージョン関係なくですが、
中･右プルダウン２つの表示・非表示に対して、
分岐のパターンは４つが正しいのではないでしょうか。
// ① 中プルダウン: 全て、右プルダウン: 全て
if(str == "." && str2 == "."){
$('#feedList dt').show();
$('#feedList dd').show();
}
// ② 中プルダウン: 全て、右プルダウン: テストA, B, ...
else if(str == "."){
$('#feedList dt' + str2).show();
$('#feedList dd' + str2).show();
}
/* ↓ここが必要？
// ③ 中プルダウン: タイプA, B, ...、右プルダウン: 全て
else if(str2 == "."){
$('#feedList dt' + str).show();
$('#feedList dd' + str).show();
}
*/
// ④ 中プルダウン: タイプA, B, ...、右プルダウン: テストA, B, ...
else
{
$('#feedList dt' + str + str2).show();
$('#feedList dd' + str + str2).show();
}③の分岐がないため「中プルダウン: タイプA, B, ...、右プルダウン: 全て」のケースが④の分岐に流れています。
その結果、例えば「$('#feedList dt.typeA.')」を呼ぶ時にエラーとなります。
1.7.0のバージョンでは「$('#feedList dt.typeA.')」が許容（#feedList dt.typeA.[任意]の要素）されていましたが、
1.9.1のバージョンでは「$('#feedList dt.typeA.')」がエラーになるみたいですね。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+2
noConflict()というメソッドを利用して、Jquery2つを共存させてみてはどうでしょうか？
http://webnonotes.com/javascript-2/jquery-noconflict/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
var $170 = $.noConflict(true);
(function($){
//ver1.9.1の内容を記入
console.info("ver = " + $.fn.jquery);//確認用
})(jQuery);
(function($){
$(function(){
//ver1.7.0の内容を記入
$(function(){
var str = "";
var str2 = "";
$('p#noresult').hide();
//console.info("ver = " + $.fn.jquery);//確認用
$("select#type").change(function () {
$('p#noresult').hide();
$('#feedList dt').hide();
$('#feedList dd').hide();
str = "." + $('select#type option:selected').val();
str2 = "." + $('select#test option:selected').val();
var num = "";
if(str == "." && str2 == "."){
$('#feedList dt').show();
$('#feedList dd').show();
}
else if(str == "."){
$('#feedList dt' + str2).show();
$('#feedList dd' + str2).show();
}
else
{
$('#feedList dt' + str + str2).show();
$('#feedList dd' + str + str2).show();
}
num = $('#feedList dt:visible').length;
if(num == 0){
$('p#noresult').show();
}
});
$("select#test").change(function () {
$('p#noresult').hide();
$('#feedList dt').hide();
$('#feedList dd').hide();
str = "." + $('select#type option:selected').val();
str2 = "." + $('select#test option:selected').val();
var num2 = "";
if(str == "." && str2 == "."){
$('#feedList dt').show();
$('#feedList dd').show();
}
else if(str2 == "."){
$('#feedList dt' + str).show();
$('#feedList dd' + str).show();
}
else
{
$("#feedList dt" + str + str2).show();
$("#feedList dd" + str + str2).show();
}
num2 = $("#feedList dt:visible").length;
if(num2 == 0){
$('p#noresult').show();
}
});
});
});
})($170);
</script>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。