前提・実現したいこと
当方プログラム初心者です。
こちらのサイトの下記サンプルに、リセットボタンを追加したいです。
http://cly7796.net/wp/javascript/implement-the-process-of-narrowing-down-the-list/
サンプル
http://cly7796.net/wp/sample/implement-the-process-of-narrowing-down-the-list/index3.html
リセットボタンを押すと、セレクトボックスやチェックボックスからチェックが外れ、
かつ非表示にしていた項目が全表示になるようにしたいです。
自分でもいろいろ試してはみたのですがわからず…
どうかご教授いただきたくお願いします。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>サンプル</title> <link rel="stylesheet" href="./sample.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./sample3.js"></script> <script src="../analytics.js"></script> </head> <body> <div id="page"> <div class="serchBox"> <select name="type"> <option value="">種類を選択</option> <option value="mammals">哺乳類</option> <option value="reptiles">爬虫類</option> <option value="birds">鳥類</option> <option value="other">その他</option> </select> <select name="live"> <option value="">生活を選択</option> <option value="water">水中</option> <option value="land">陸上</option> <option value="water-and-land">水中と陸上</option> <option value="sky">空</option> </select> <select name="color"> <option value="">色を選択</option> <option value="black">黒系</option> <option value="white">白系</option> <option value="green">緑系</option> <option value="brown">茶系</option> </select> <div class="checkboxArea"> <p>大きさを選択</p> <label for="small"> <input type="checkbox" name="size" value="small" id="small" />小さい </label> <label for="middle"> <input type="checkbox" name="size" value="middle" id="middle" />中くらい </label> <label for="large"> <input type="checkbox" name="size" value="large" id="large" />大きい </label> </div> <div class="checkboxArea"> <p>名前を選択</p> <label for="dog"> <input type="checkbox" name="name" value="dog" id="dog" />イヌ </label> <label for="cat"> <input type="checkbox" name="name" value="cat" id="cat" />ネコ </label> <label for="monkey"> <input type="checkbox" name="name" value="monkey" id="monkey" />サル </label> <label for="dolphin"> <input type="checkbox" name="name" value="dolphin" id="dolphin" />イルカ </label> <label for="jellyfish"> <input type="checkbox" name="name" value="jellyfish" id="jellyfish" />クラゲ </label> <label for="penguin"> <input type="checkbox" name="name" value="penguin" id="penguin" />ペンギン </label> <label for="turtle"> <input type="checkbox" name="name" value="turtle" id="turtle" />カメ </label> <label for="redstart"> <input type="checkbox" name="name" value="redstart" id="redstart" />ジョウビタキ </label> <label for="myna"> <input type="checkbox" name="name" value="myna" id="myna" />九官鳥 </label> <label for="butterfly"> <input type="checkbox" name="name" value="butterfly" id="butterfly" />蝶 </label> <label for="crocodile"> <input type="checkbox" name="name" value="crocodile" id="crocodile" />ワニ </label> </div> </div> <ul class="list"> <li> <img src="01.jpg" width="240" height="155"> <p class="name">名前:<span class="dolphin">イルカ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="water">水中</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="large">大きい</span></p> </li> <li> <img src="02.jpg" width="240" height="155"> <p class="name">名前:<span class="jellyfish">クラゲ</span></p> <p class="type">種類:<span class="other">その他</span></p> <p class="live">生活:<span class="water">水中</span></p> <p class="color">色:<span class="white">白系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> <li> <img src="03.jpg" width="240" height="155"> <p class="name">名前:<span class="penguin">ペンギン</span></p> <p class="type">種類:<span class="birds">鳥類</span></p> <p class="live">生活:<span class="water-and-land">水中と陸上</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="04.jpg" width="240" height="155"> <p class="name">名前:<span class="turtle">カメ</span></p> <p class="type">種類:<span class="reptiles">爬虫類</span></p> <p class="live">生活:<span class="water-and-land">水中と陸上</span></p> <p class="color">色:<span class="green">緑系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> <li> <img src="05.jpg" width="240" height="155"> <p class="name">名前:<span class="redstart">ジョウビタキ</span></p> <p class="type">種類:<span class="birds">鳥類</span></p> <p class="live">生活:<span class="sky">空</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> <li> <img src="06.jpg" width="240" height="155"> <p class="name">名前:<span class="cat">ネコ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="07.jpg" width="240" height="155"> <p class="name">名前:<span class="butterfly">蝶</span></p> <p class="type">種類:<span class="other">その他</span></p> <p class="live">生活:<span class="sky">空</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> <li> <img src="08.jpg" width="240" height="155"> <p class="name">名前:<span class="cat">ネコ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="09.jpg" width="240" height="155"> <p class="name">名前:<span class="dog">イヌ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="10.jpg" width="240" height="155"> <p class="name">名前:<span class="crocodile">ワニ</span></p> <p class="type">種類:<span class="reptiles">爬虫類</span></p> <p class="live">生活:<span class="water-and-land">水中と陸上</span></p> <p class="color">色:<span class="green">緑系</span></p> <p class="size">大きさ:<span class="large">大きい</span></p> </li> <li> <img src="11.jpg" width="240" height="155"> <p class="name">名前:<span class="monkey">サル</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="12.jpg" width="240" height="155"> <p class="name">名前:<span class="myna">九官鳥</span></p> <p class="type">種類:<span class="birds">鳥類</span></p> <p class="live">生活:<span class="sky">空</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> <li> <img src="13.jpg" width="240" height="155"> <p class="name">名前:<span class="dog">イヌ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="white">白系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> <li> <img src="14.jpg" width="240" height="155"> <p class="name">名前:<span class="dog">イヌ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> </ul> </div> </body>
該当のソースコード
$(function() { $(document).on('change', '.serchBox select, .serchBox input[type=checkbox]', function() { filter_list(); }); // リストを絞り込む関数 function filter_list() { var lists = $('.list li'); lists.show(); // selectの絞り込み for (var i = 0; i < $('.serchBox select').length; i++) { // 絞り込みの項目を取得 var item = $('.serchBox select').eq(i).attr('name'); // 絞り込みの対象を取得 var target = $('.serchBox select').eq(i).val(); if(target != '') { for (var j = 0; j < lists.length; j++) { // 絞り込み対象でない場合は非表示 if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) { lists.eq(j).hide(); } }; } } // checkboxの絞り込み for (var i = 0; i < $('.serchBox .checkboxArea').length; i++) { // 絞り込みの項目を取得 var item = $('.serchBox .checkboxArea').eq(i).find('input:checkbox').attr('name'); // 絞り込みの対象を取得 var target = []; $('[name=' + item + ']:checked').each(function() { target.push($(this).val()); }); if(target.length) { for (var j = 0; j < lists.length; j++) { // 絞り込み対象かどうかを調べる var showCheck = false; for (var k = 0; k < target.length; k++) { if(lists.eq(j).find('.' + item).find('span').hasClass(target[k])) { showCheck = true; } } // 絞り込み対象でない場合は非表示 if(!showCheck) { lists.eq(j).hide(); } }; } } } });
回答2件
あなたの回答
tips
プレビュー