Question

我有一组复选框和选择列表，用于过滤元素。

这是我的HTML：

<div id="users">
  <input name="user" type="checkbox" value="1">
  John
  <input name="user" type="checkbox" value="2">
  Mike
  <input name="user" type="checkbox" value="3">
  Peter </div>

<select name="products">
  <option value="4">Product 1</option>
  <option value="5">Product 2</option>
  <option value="6">Product 3</option>
</select>

<ul id="items">
  <li data-filter="1">Item 1</li>
  <li data-filter="2">Item 2</li>
  <li data-filter="1">Item 3</li>
  <li data-filter="3">Item 4</li>
</ul>

这里是javascript：

$('select[name=products]').change(function() {
    var filter = $(this).val();
    filterList(filter);
});

//News filter function
function filterList(value) {
    var list = $("#items li");
    $(list).fadeOut("fast");
    if (value == "all") {
        $("#items").find("li").each(function () {
            $(this).delay(200).slideDown("fast");
        });
    } else {
        $("#items").find("li[data-filter*=" + value + "]").each(function () {
            $(this).delay(200).slideDown("fast");
        });
    }
}

我现在的问题是包含复选框以及部分过滤选项，但我不确定要走哪条路。我是否昏迷分离数据过滤器值，例如：data-filter =“1,3”，其中1是产品，3是用户，或完全添加新数据属性？

Answer 1

您的选择项具有不同的价值，应该是

<select name="products">
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
  <option value="3">Product 3</option>
</select>

<ul id="items">
  <li data-filter="1">Item 1</li>
 <li data-filter="2">Item 2</li>
 <li data-filter="3">Item 3</li>
 <li data-filter="4">Item 4</li>
</ul>

对于用户，您必须创建一个数组并将选中的值放入其中。然后，在下拉列表更改时，您将在数组中的end foreach值处调用另一个函数。你可以从中获得一些想法。

 var selected = ['1','2'];
      $('selected').each(function (i) {
            $("#items").find("li[data-filter*=" + value + "]").each(function ()     {
            $(this).delay(200).slidedown("fast");
        });
    });

Answer 2

新代码和解决方案。 https://jsfiddle.net/Cuchu/p4w5zbyh/

Html - 在imputs中添加类'check'

<div id="users">
  <input class="check" name="user" type="checkbox" value="1">
  John
  <input class="check" name="user" type="checkbox" value="2">
  Mike
  <input class="check" name="user" type="checkbox" value="3">
  Peter </div>

<select name="products">
  <option value="4">Product 1</option>
  <option value="5">Product 2</option>
  <option value="6">Product 3</option>
</select>

<ul id="items">
  <li data-filter="1">Item 1</li>
  <li data-filter="2">Item 2</li>
  <li data-filter="1">Item 3</li>
  <li data-filter="3">Item 4</li>
</ul>

的Javascript

$('select[name=products]').change(function() {
    var filter = $(this).val();
    filterList(filter);
});

//News filter function
function filterList(value) {

    var checkedValue = new Array(); 

        var inputElements = document.getElementsByClassName('check');
        for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue.push(inputElements[i].value);
      }
        }

      var list = $("#items li");
    $(list).fadeOut("fast");

    if (value == "all") {
          $("#items").find("li").each(function () {
            $(this).delay(200).slideDown("fast");
        });
    } else {
        if(checkedValue.indexOf(value) < 0) {
            checkedValue.push(value);
        } 

        filter = new Array;

        checkedValue.forEach(function(entry) {
        filter.push("li[data-filter=" + entry + "]");

                });

        miVar1 = filter.join(",");
        console.log(miVar1);

            $("#items").find(miVar1).each(function () {
            $(this).delay(200).slideDown("fast");
        });
    }
}

更改选择时，读取选中的checbox并在数组中设置值，然后读取值选择产品并向数组添加值。然后，代码

filter = new Array;
checkedValue.forEach(function(entry) {
    filter.push("li[data-filter=" + entry + "]");
});

miVar1 = filter.join(",");

使用元素过滤器和字符串中的连接数组创建一个新数组，例如：“li [data-filter = 1]，li [data-filter = 2]，li [data-filter = 4]”并使用过滤器jquery。

测试jsfiddle并检查浏览器控制台以查看过滤器。

基于数据属性

2 个答案: