html内のデータ属性が、「<select name=…」内の「option value」の値の1つでも一致している場合、画面上に表示するようにしたいと思っております。
しかし実際にデータ属性内の値に配列で複数入れて、jsを実行しても、
一致するどころか、不一致とみなされ、非表示になってしまいます。
エラー等に関しては、特に発生していません
該当のソースコード
html
1<html lang="ja"> 2<head> 3<title>HTML, CSS and JavaScript demo</title> 4<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no"> 5<link rel="stylesheet" type="text/css" href="test.css"> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 7<script type="text/javascript" src="function.js"></script> 8 9</head> 10<body> 11<div id="page"> 12 <div class="serchBox"> 13 <select name="region"> 14 <option value="">地域を選択</option> 15 <option value="matudo">松戸市</option> 16 <option value="chiba">千葉市</option> 17 <option value="katuura">勝浦市</option> 18 <option value="abiko">我孫子市</option> 19 <option value="kashiwa">柏市</option> 20 </select> 21</div> 22 23<ul class="list"> 24 <li><p class="region"><span data-tiiki='["matudo","chiba"]'>松戸市</span></p></li> 25 <li><p class="region"><span data-tiiki="chiba">千葉市</span></p></li> 26 <li><p class="region"><span data-tiiki="katuura">勝浦市</span></p></li> 27 <li><p class="region"><span data-tiiki="abiko">我孫子市</span></p></li> 28 <li><p class="region"><span data-tiiki="kashiwa">柏市</span></p></li> 29</ul> 30</div> 31</body> 32</html>
js
1$(function() { 2 var lists = $('.list li'); 3 $(document).on('change', '.serchBox select', function() { 4 lists.show(); 5 for (var i = 0; i < $('.serchBox select').length; i++) { 6 // 絞り込みの項目を取得 7 var item = $('.serchBox select').eq(i).attr('name'); 8 // 絞り込みの対象を取得 9 var target = $('.serchBox select').eq(i).val(); 10 11 if(target != '') { 12 for (var j = 0; j < lists.length; j++) { 13 // 絞り込み対象でない場合は非表示 14 if(lists.eq(j).find('.' + item).find('span').data('tiiki') !== target) { 15 lists.eq(j).hide(); 16 } 17 }; 18 } 19 }; 20 }); 21});
試したこと
<li><p class="region"><span data-tiiki='["matudo","chiba"]'>松戸市</span></p></li> 上記のコードのみ、複数の値を入れることで、「"matudo","chiba"」のどちらかの値の場合、表示するようにできないか、試みをしてみました。実際の挙動
https://codepen.io/satoru1993/pen/gJwYNa
何卒宜しくお願い致します。
回答5件
あなたの回答
tips
プレビュー