使用jQuery過濾元素

Question

HTMl和JS：

 $('select').on('change', function(e) { var filters = {}; $('select').each(function(index, select) { var value = String($(select).val()); // if comma separated if (value.indexOf(',') !== -1) { value = value.split(','); } filters[$(select).attr('name')] = value; }); $('li').each(function(i, item) { var show = true; $.each(filters, function(name, val) { if (val === "null") { return; } if (name === 'author' && $(item).data('author').indexOf(val) === -1) { show = false; } else($(item).data(name) !== val) { show = false; } }); if (show) { $(item).show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <form id="filters"> <select name="tag"> <option value="Tag1">Tag1</option> <option value="Tag2">Tag2</option> </select> <select name="author"> <option value="John Appleseed">John Appleseed</option> <option value="Lisa Hayden">Lisa Hayden</option> <option value="Trevor McGregor">Trevor McGregor</option> </select> </form> <ul class="list"> <li data-tag="Tag1" data-author="John Appleseed">Item 1</li> <li data-tag="Tag2" data-author="Lisa Hayden">Item 2</li> <li data-tag="Tag1,Tag3" data-author="Trevor McGregor">Item 3</li> </ul> 

我正在嘗試使過濾器在列表上工作。 我基本上需要的是根據選擇顯示div。 我能夠使單個過濾器工作但不能將它們全部放在一起（例如，如果作者是x並且包含標簽.. show else hide）

Answer 1

  $('select').on('change', function(e) { var filters = {}; $('select').each(function(index, select) { var value = String($(select).val()); // if comma separated if (value.indexOf(',') !== -1) { value = value.split(','); } filters[$(select).attr('name')] = value; }); $('li').each(function(i, item) { var show = true; $.each(filters, function(name, val) { if (val === "null") { return; } if (name === 'author' && $(item).data('author').indexOf(val) === -1) { show = false; } else if( $(item).data(name).indexOf(val) === -1) { show = false; } }); if (show) { $(item).show(); }else{ $(item).hide(); } }); }); 

 <form id="filters"> <select name="tag"> <option value="Tag1">Tag1</option> <option value="Tag2">Tag2</option> <option value="Tag3">Tag3</option> </select> <select name="author"> <option value="John Appleseed">John Appleseed</option> <option value="Lisa Hayden">Lisa Hayden</option> <option value="Trevor McGregor">Trevor McGregor</option> </select> </form> <ul class="list"> <li data-tag="Tag1" data-author="John Appleseed">Item 1</li> <li data-tag="Tag2" data-author="Lisa Hayden">Item 2</li> <li data-tag="Tag1,Tag3" data-author="Trevor McGregor">Item 3</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 

您的腳本中存在錯誤：

替換此行

} else($(item).data(name) !== val) {

用這條線

} else if( $(item).data(name).indexOf(val) === -1) {

Answer 2

您可以使用.filter()和.indexOf()來過濾和.show()只有在兩種元素data-*屬性匹配， .siblings()來.hide()是不匹配的元素

 var select = $("select").on("change", function(e) { var filtered = li.filter(function(i, el) { return this.dataset.tag .indexOf(select.filter("[name=tag]").val()) > -1 && this.dataset.author .indexOf(select.filter("[name=author]").val()) > -1 }); if (filtered.length) filtered.show().siblings().hide(); else li.hide(); }); var li = $(".list li").hide(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <form id="filters"> <select name="tag"> <option value="Tag1">Tag1</option> <option value="Tag2">Tag2</option> <option value="Tag3">Tag3</option> </select> <select name="author"> <option value="John Appleseed">John Appleseed</option> <option value="Lisa Hayden">Lisa Hayden</option> <option value="Trevor McGregor">Trevor McGregor</option> </select> </form> <ul class="list"> <li data-tag="Tag1" data-author="John Appleseed">Item 1</li> <li data-tag="Tag2" data-author="Lisa Hayden">Item 2</li> <li data-tag="Tag1,Tag3" data-author="Trevor McGregor">Item 3</li> </ul>