javascript - 如何使用输入复选框过滤 json 数据并显示和隐藏符合条件的产品

Question

我有一些数据存储在数组中。当我单击复选框时，我想显示符合条件的项目并隐藏不符合条件的项目。

例如，如果我有一个通过 for 循环 呈现的产品列表，当我单击 Android 的复选框时，我只想显示 Android 手机。

这是迄今为止我的 JavaScript 代码:

var data = {
    "products": [{
        "Name": "Apple iPhone6 16GB",
        "OS": "iOS",
        "Camera": "16mp",
        "Price": "$" + 99.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }, {
        "Name": "Samsung- Galaxy S6 32GB",
        "OS": "android",
        "Camera": "16mp",
        "Price": "$" + 199.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }, {
        "Name": "HTC One M9 32GB",
        "OS": "android",
        "Camera": "16mp",
        "Price": "$" + 199.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }, {
        "Name": "Apple iPhone6 Plus 32GB",
        "OS": "iOS",
        "Camera": "16mp",
        "Price": "$" + 399.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }, {
        "Name": "Samsung Galaxy Note 5 32GB",
        "OS": "android",
        "Camera": "16mp",
        "Price": "$" + 499.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }, {
        "Name": "LG G Flex 2 32GB",
        "OS": "android",
        "Camera": "16mp",
        "Price": "$" + 199.99,
        "Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
    }]
}
for (var i = 0; i < data.products.length; i++) {
    $('#productList').append(
        '<div class="item">' +
            '<h3>' + data.products[i].Name + '</h3>' +
            '<h4>' + data.products[i].OS + '</h4>' +
            '<h5>' + data.products[i].Camera + '</h5>' +
            '<h5>' + data.products[i].Price + '</h5>' +
            '<p>' + data.products[i].Specs
    );
}

这是 HTML 代码:

<div id="container">
  <ul id="mainNav">
    <li>
      Device Manufacturer
      <ul>
        <li><input type="checkbox" name= "device" value="Apple"> Apple</li>
        <li><input type="checkbox" name= "device" value="HTC"> HTC</li>
        <li><input type="checkbox" name= "device" value="LG"> LG</li>
        <li><input type="checkbox" name= "device" value="Samsung"> Samsung</li>
      </ul>
    </li>
    <li>
      Operating System
      <ul>
        <li><input type="checkbox" name= "device" value="Android"> Android</li>
        <li><input type="checkbox" name= "device" value="ios"> iOS</li>
      </ul>
    </li>
    <li>
      Camera
      <ul>
        <li><input type="checkbox" name= "device" value="8mp"> 8mp</li>
        <li><input type="checkbox" name= "device" value="16mp"> 16mp</li>
      </ul>
    </li>
    <li>
      Storage
      <ul>
        <li><input type="checkbox" name= "device" value="Apple"> 16GB</li>
        <li><input type="checkbox" name= "device" value="Apple"> 32GB</li>
        <li><input type="checkbox" name= "device" value="Apple"> 64GB</li>
      </ul>
    </li>
  </ul>
  <div id="productList"></div>
</div>

Answer 1

这是一种简单的方法(可能有更好的解决方案，但这应该可行):

http://jsfiddle.net/txrk87ug/17/

将产品列表的构建创建为函数。它首先清除产品列表，然后创建选定的设备复选框数组，然后使用该数组作为过滤器构建产品列表以选择适当的产品:

$.fn.buildProductList = function(){
    $('#productList').html("");
    var devices = [];
    $('input[name="device"]:checked').each(function() {
        devices.push(this.value);
    });
    for(var i =0; i < data.products.length; i++) {
        if($.inArray(data.products[i].Device, devices) > -1)
        {
            $('#productList').append(data.products[i].Name + '' + '<br />' + data.products[i].OS + '' + '<br />' + data.products[i].Camera + '' + '<br />' + data.products[i].Price + '' + '<br />' + data.products[i].Specs + '<br />&nbsp;<br />');
        }
    }
}

创建触发器以在复选框更改时触发构建产品列表功能:

$(":checkbox").change(function() {
    $.fn.buildProductList();
});

您的产品需要与您所做的复选框选择的值相匹配的属性。对于演示，我仅包含“设备”属性。您应该能够选择任意数量的设备制造商，并让它仅显示与这些选择匹配的产品。您可以以相同的方式为其他复选框组构建数组，并在决定是否应将产品附加到列表时将其添加到 if 语句中。

希望这至少能为您带来一个良好的开端。