选择器数据-具有多个值

Question

我有一些复选框，其值应该过滤页面中某处的某些div的内容，而在选择那些div时遇到了一些麻烦。

 $('input[type=checkbox]').on('change', function(){ /*here I hide all the div and then try to generate the correct selector to show the div's that correspond to the checkbox selection*/ $('div').hide(); var listSelection = ''; $('input[type=checkbox]:checked').each(function(){ if(listSelection == '') listSelection = $(this).val(); else listSelection += ' ' + $(this).val(); }); /*here i fail in the selection of them*/ $('[data-category="' + listSelection + '"]').show(); if(listSelection == '') $('div').show(); }); 

 <label> <input type="checkbox" value="a"> a </label> <br> <label> <input type="checkbox" value="b"> b </label> <br> <label> <input type="checkbox" value="c"> c </label> <br> <label> <input type="checkbox" value="x"> x </label> <div data-category="abc"></div> <div data-category="ab"></div> <div data-category="xa"></div> <div data-category="ca"></div> <div data-category="bcx"></div> 

假设我检查a->结果应为1、2、3和4 div以显示如果稍后我检查a和c->结果应为1和3div以显示但不显示任何内容

Answer 1

尝试这个

更换：

 $('[data-category="' + listSelection + '"]').show();

通过

 $("div[data-category='valueSearch']").show();

PS：按属性选择器是：

 $("typeElement[prop/attr='valueSearch']")

Answer 2

您的代码运行完美。

只需为div添加一些值即可。 喜欢

<div data-category="a b c">Hello a b c</div>

您的div是空的吗？

Answer 3

我不得不采取不同的方法。 我将数据类别更改为类。 其余的更改都在javascript中。

 $('input[type=checkbox]').on('change', function () { $('div').hide(); var listFiltered = $('div'); $('input[type=checkbox]:checked').each(function () { listFiltered = listFiltered.filter('.'+ $(this).val()); }); listFiltered.show(); }); 

 <div class="abc">First div</div> <div class="ab">Second div</div> <div class="xa">Third div</div> <div class="ca">Fourth div</div> <div class="bcx">Fifth div</div>