使用复选框筛选具有 JSON 的元素

Question

我试图弄清楚如何根据JSON数据过滤元素并将其与元素属性匹配。

不确定如何使用多个参数执行此操作 - 对于一个参数，我会做这样的事情来匹配它们：

$('li.grid-item').filter(function (i, e) {
return productList.indexOf($(this).attr('data-partnumber')) > -1
}).show();

最好的方法是什么？

代码笔：

.HTML：

<div>
<input id="box1" type="checkbox" />
<label for="box1">Group 1</label>
<br>
<input id="box2" type="checkbox" />
<label for="box2">Group 2</label>
<br>
<input id="box3" type="checkbox" />
<label for="box3">Group 3</label>
</div>

<ul class="grid">
<li class="grid-item" style="display:none">1<span data-partnumber="MIG455239" style=""></span></li>
<li class="grid-item" style="display:none">2<span data-partnumber="MIG455239" style=""></span></li>
<li class="grid-item" style="display:none">3<span data-partnumber="MIG455239" style=""></span></li>
</ul>

.JS

var productList= [ 
{ 
mig:"MIG1812067",
group:"one",
},
{ 
mig:"MIG1812076",
group:"two",
},
{ 
mig:"MIG1812136",
group:"three","
}
];

Answer 1

您可以使用以下代码来显示/隐藏相应的组

更正您的 JSON 数组，

1. 因为数组中的每个 JSON 都有额外的逗号，请将其删除。
2. 将组值放在每个相应的复选框上
3. 单击复选框时，迭代所有复选框以获取值并找到相应的 li 元素
4. 为选中的复选框显示相应的 li 元素

var productList= [ 
{ 
mig:"MIG1812067",
group:"one"
},
{ 
mig:"MIG1812076",
group:"two"
},
{ 
mig:"MIG1812136",
group:"three"
}
];
$(function(){
$('input[type=checkbox]').on('click', function(){
var $checkboxes = $('input[type=checkbox]:checked');
$('ul.grid li.grid-item').hide();
$checkboxes.each(function(){
var val = $(this).val();
$.each(productList, function(index, value){
if(value.group == val) {
$('ul.grid li.grid-item').filter(function(){
return $(this).find('span[data-partnumber="' + value.mig + '"]').length ==1; }).show();
}
});
});
});
});

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*** basic styles ***/
body { margin: 30px; } 
h1 { font-size: 1.5em; }
label { font-size: 24px; }
div { 
width: 175px; 
margin-left: 20px;
}
/*** custom checkboxes ***/
input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
}
input[type=checkbox] + label:before { content: "f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */
input[type=checkbox]:checked + label:before { content: "f046"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */
.grid-item {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 260px;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
position: relative;
height: 220px;
margin-right: 10px;
margin-bottom: 10px;
font-size: 3rem;
font-weight: 600;
color: #000000;
background: white;
box-shadow: inset 0px 0px 0px 1px #edeef4;
-webkit-transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate(0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: text-shadow 0.1s ease-in, -webkit-transform 0.14s ease-in;
transition: text-shadow 0.1s ease-in, -webkit-transform 0.14s ease-in;
transition: transform 0.14s ease-in, text-shadow 0.1s ease-in;
transition: transform 0.14s ease-in, text-shadow 0.1s ease-in, -webkit-transform 0.14s ease-in;
will-change: transform;
cursor: pointer;
}
.grid {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
max-width: 80%;
height: 100%;
margin: 0 auto;
padding: 30px 0 0;
list-style: none;
}
body {
background: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Custom Checkboxes</h1>
<div>
<input id="box1" type="checkbox" value="one"/>
<label for="box1">Group 1</label>
<br>
<input id="box2" type="checkbox" value="two"/>
<label for="box2">Group 2</label>
<br>
<input id="box3" type="checkbox" value="three"/>
<label for="box3">Group 3</label>
</div>
<ul class="grid">
<li class="grid-item" style="display:none">1<span data-partnumber="MIG1812067" style=""></span></li>
<li class="grid-item" style="display:none">>2<span data-partnumber="MIG1812076" style=""></span></li>
<li class="grid-item" style="display:none">3<span data-partnumber="MIG1812136" style=""></span></li>
</ul>