Question

我有一个无组织的列表，填充了具有多个数据属性的项目。

<ul>
    <li data-category="option1" data-green="t" data-blue="f" data-soft="t">Product 1</li>
    <li data-category="option1,option3" data-green="f" data-blue="t" data-soft="t">Product 2</li>
    <li data-category="option4" data-green="f" data-blue="f" data-soft="f">Product 3</li>
    <li data-category="option5" data-green="f" data-blue="t" data-soft="t">Product 4</li>
    <li data-category="option1" data-green="t" data-blue="f" data-soft="f">Product 5</li>
    <li data-category="option1,option3,option4" data-green="f" data-blue="f" data-soft="t">Product 6</li>
</ul>

我试图根据几个选择标准来优化此列表。可以通过一个下拉选择和多个真/假复选框来选择这些条件。

<div id="refine">
    <select class="category">
        <option value="showall">Show all</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
    </select>
    <input type="checkbox" value="green">Green
    <input type="checkbox" value="blue">blue
    <input type="checkbox" value="soft">soft
</div>

真/假复选框的数量是动态的，因此将来可以添加三个以上。

此外，产品可以在多个类别中使用，如果是这样，则数据属性category具有多个以逗号分隔的值。

我尝试根据所选选项优化列表。

$('#refine').on('click','input[type="checkbox"]',function(){
    var inputvalue = $(this).val();
    if($(this).is( ":checked" )){
        $('li[data-'+inputvalue+']').each(function(){
            var attributValue = $(this).attr('data-'+inputvalue+'');
            if(attributValue != 't'){
                $(this).hide();
            }
        });
    }
    else{
    //Show all (this still needs to check what other options are still selected)
        $('li[data-'+inputvalue+']').show();
    }
});

$('#refine').on('change','.category', function(){
    var selectedValue = $(this).val();
    $("li[data-category]").each(function(){
        var data_categ = $(this).attr('data-category');
        if (data_categ.indexOf(selectedValue) < 0){
            $(this).hide();
        }else{
            //Show all (this still needs to check what other options are still selected)
            $(this).show();
        }
        if(selectedValue == 'showall'){
            //Show all (this still needs to check what other options are still selected)
            $(this).show();
        }
    });
});

我被困在我想要展示我隐藏的部分的部分。当我选择＆＃34;显示全部＆＃34;在下拉列表中，或取消选中一个复选框，将再次显示所有元素。忽略其他选择选项。

我该如何防止这种情况？

因此，请考虑以下情况：我选择了option 3和soft。我改变了对option 3选择的看法，并将其切换回Show all。现在我想显示所有类别，但只显示soft作为数据属性的类别。但是在我的代码中，它再次在Show all上显示了所有列表项，而忽略了我仍然选择soft这一事实。

选择多个复选框并取消选择一个复选框也是如此。

有人可以协助吗？

Fiddle

Answer 1

看看

var $products = $('li'),
  $checks = $('#refine input[type="checkbox"]'),
  $category = $('#refine select.category');
$('#refine').on('change', 'input, select', function() {
  var $lis = $products,
    category = $category.val(),
    $checked = $checks.filter(':checked');

  if (category != 'showall') {
    $lis = $lis.filter(function() {
      return $(this).data('category').indexOf(category) >= 0;
    });
  }

  if ($checked.length) {
    $checked.each(function() {
      $lis = $lis.filter('[data-' + $(this).val() + '="t"]');
    }).get();
  }

  $lis.show();
  $products.not($lis).hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="refine">
  <select class="category">
    <option value="showall">Show all</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
  <input type="checkbox" value="green" />green
  <input type="checkbox" value="blue" />blue
  <input type="checkbox" value="soft" />soft
</div>

<ul>
  <li data-category="option1" data-green="t" data-blue="f" data-soft="t">Product 1</li>
  <li data-category="option1,option3" data-green="f" data-blue="t" data-soft="t">Product 2</li>
  <li data-category="option4" data-green="f" data-blue="f" data-soft="f">Product 3</li>
  <li data-category="option5" data-green="f" data-blue="t" data-soft="t">Product 4</li>
  <li data-category="option1" data-green="t" data-blue="f" data-soft="f">Product 5</li>
  <li data-category="option1,option3,option4" data-green="f" data-blue="f" data-soft="t">Product 6</li>
</ul>

基于复选框和下拉选择的精炼列表

1 个答案: