前提・実現したいこと
http://cly7796.net/wp/sample/implement-the-process-of-narrowing-down-the-list/index5.html
http://cly7796.net/wp/sample/implement-the-process-of-narrowing-down-the-list/index4.html
上記の二つを基に、プルダウンメニューで選択したのちに、
決定ボタンを押すと、絞り込む使用で、リセットボタンを押すと、
絞り込みが初期化し、ロード時の状態に戻るギミックを作成したいと思っております。
現状リセットボタンを押しても、プルダウンが「地域を選択」と初期化されるだけで、
ロード時に表示されている要素は消えたままになる。
発生している問題・エラーメッセージ
エラーメッセージ等はデバックツールで検証しても 特に出ておりませんでした。
該当のソースコード
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="okashiwa">柏市</option> 20 </select> 21 <button id="search">検索</button> 22 <button id="reset">リセット</button> 23 </div> 24 25 <ul class="list"> 26 <li> 27 28 <p class="region"><span class="matudo">松戸市</span></p> 29 30 </li> 31 32 </ul> 33</div> 34</body> 35</html>
js
1$(function() { 2 $(document).on('change', '.serchBox select, .serchBox input[type=checkbox]', function() { 3 filter_list(); 4 }); 5 6 // リセットボタンをクリックしたときの処理 7 $('#reset').on('click', function() { 8 // フォームのselectとcheckboxをリセット 9 $('.serchBox select').val(''); 10 // リストの絞り込みをリセット 11 filter_list(); 12 }); 13 14 // リストを絞り込む関数 15 function filter_list() { 16 var lists = $('.list li'); 17 $('#search').on('click', function() { 18 lists.show(); 19 for (var i = 0; i < $('.serchBox select').length; i++) { 20 // 絞り込みの項目を取得 21 var item = $('.serchBox select').eq(i).attr('name'); 22 // 絞り込みの対象を取得 23 var target = $('.serchBox select').eq(i).val(); 24 25 if(target != '') { 26 for (var j = 0; j < lists.length; j++) { 27 // 絞り込み対象でない場合は非表示 28 if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) { 29 lists.eq(j).hide(); 30 } 31 }; 32 } 33 }; 34 }); 35 } 36});
試したこと
jsソースコード内の
js
1var lists = $('.list li'); 2$('#search').on('click', function() { 3lists.show();
上記3行を
js
1var lists = $('.list li'); 2lists.show();
上記に変えると、
リセットボタンを押すことで、
プルダウンもhtml要素の表示も、
ロード時の状態に戻ることは判明。
※ただし、決定ボタンを押したときの
動作を削ることになるため、決定を押すことで
絞り込みを行うことができなくなる。
また、なぜ
var lists = $('.list li');
$('#search').on('click', function() {
lists.show();
こちらではリセットによる初期化がうまくいかないかがわかりません。
プルダウンを選択し、決定ボタンで実行する動作と、
リセットボタンで初期化する動作を両立する
にはどこが原因かよくわかっておりません。
何卒宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー