Question

我有一个行列表，我希望它们基于超过1个结果显示我的意思是复选框值当我放置多个数据标签时我只使用1个数据标签但是没有工作我使用代码粘贴了snipet所以你将能够知道它是如何制定的我还尝试过只使用3个大小的复选框并放置不同的大小，如data-tag =“XL”second list data-tag =“L”and it正在以这种方式工作，但没有与miltiple合作

$(document).ready(function(){
  $('.size').on('change', function(){
    var category_list = [];
    $('#filters :input:checked').each(function(){
      var category = $(this).val();
      category_list.push(category);
    });

    if(category_list.length == 0)
      $('.resultblock').fadeIn();
    else {
      $('.resultblock').each(function(){
        var item = $(this).attr('data-tag');
        if(jQuery.inArray(item,category_list) > -1)
          $(this).fadeIn('slow');
        else
          $(this).hide();
      });
    }   
  });
}); 

$(document).ready(function(){
  $('.color').on('change', function(){
    var category_list = [];
    $('#filters :input:checked').each(function(){
      var category = $(this).val();
      category_list.push(category);
    });

    if(category_list.length == 0)
      $('.resultblock').fadeIn();
    else {
      $('.resultblock').each(function(){
        var item = $(this).attr('data-tag');
        if(jQuery.inArray(item,category_list) > -1)
          $(this).fadeIn('slow');
        else
          $(this).hide();
      });
    }   
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="size-box" id="filters">
                	<h5>size</h5>
                    <ul>
                    	<li> <input type="checkbox" name="XL" value="XL" id="XL" class="size"> <span class="check-txt">XL </span></li>
                        <li> <input type="checkbox" name="M" value="M" id="M" class="size"> <span class="check-txt">M </span></li>
                        <li> <input type="checkbox" name="L" value="L" id="L" class="size"> <span class="check-txt">L </span></li>
                    </ul>
                </div>
                
                <div class="color-box" id="filters">
                	<h5>color</h5>
                    <ul>
                    	<li> <input type="checkbox" name="White" value="White" id="White" class="color"> <span class="check-txt">White</span></li>
                        <li> <input type="checkbox" name="Black" value="Black" id="Black" class="color"> <span class="check-txt">Black</span></li>
                        <li> <input type="checkbox" name="Orange" value="Orange" id="Orange" class="color"> <span class="check-txt">Orange</span></li>
                        <li> <input type="checkbox" name="Blue" value="Blue" id="Blue" class="color"> <span class="check-txt">Blue</span></li>
                      
                    </ul>
                </div>

<ul>
  <li class="resultblock" data-tag='S L Orange Black'></li>
  <li class="resultblock" data-tag='S XL L Orange Black Blue'></li>
  <li class="resultblock" data-tag='XL L Black White Blue'></li>
  <li class="resultblock" data-tag='S XL L White Orange Black'></li>
  <li class="resultblock" data-tag='S L Blue Black'></li>
  <li class="resultblock" data-tag='S White Black'></li>
  <li class="resultblock" data-tag='S L XL Orange Black'></li>
</ul>

Answer 1

尝试这样的事情：

$('input').on('change', function () {
  var $checked = $('input:checked');
  if ($checked.length) {
    $('.resultblock').hide();
    $checked.each(function () {
      var val = $(this).val();
      $('.resultblock').filter('[data-tag*="' + val + '"]').show();
    });
  } else {
    $('.resultblock').show();
  }
});

jsFidle：https://jsfiddle.net/undaetpt/

过滤结果多于1个复选框

1 个答案: