Question

我有一些带有值的复选框，可以在页面某处过滤某些div的内容，而我在选择这些div时遇到了一些麻烦。

＆＃13;

$('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();
});

＆＃13;

<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="a b c"></div>
<div data-category="a b"></div>
<div data-category="x a"></div>
<div data-category="c a"></div>
<div data-category="b c x"></div>

＆＃13;

我们说我检查一下 - ＆gt;结果应该是显示的第1，第2，第3和第4个div 如果以后我检查a和c - ＆gt;结果应该显示第1和第3个div，但根本不显示任何内容

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中。

＆＃13;

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

＆＃13;

<div class="a b c">First div</div>
<div class="a b">Second div</div>
<div class="x a">Third div</div>
<div class="c a">Fourth div</div>
<div class="b c x">Fifth div</div>

＆＃13;

选择器数据 - 具有多个值

3 个答案: