勾选复选框时隐藏 div

Question

我希望能够在应用过滤器时隐藏某些 div（db 查询结果），例如： Fiddle Example 1 | 小提琴示例 2

所有结果都应在页面加载时显示。 使用价格和食物复选框，如果选择了price = high和food = pizza ，它将显示相应的结果并隐藏其余结果。

Filter by price: High | Low 
Filter by food: Pizza | Pasta

<div class="new">Price: Low , Type: Pasta </div>
<div class="new">Price: Low , Type: Pasta </div>
<div class="new">Price: High , Type: Pasta </div>
<div class="new">Price: Low , Type: Pizza </div>
<div class="new">Price: High , Type: Pizza </div>

Answer 1

简单的应该是给每个元素额外的属性，比如

<div class="new" price='10' foodtype='pasta'>Price: Low , Type: Pasta </div>
<div class="new" price='25' foodtype='Pasta'>Price: Low , Type: Pasta </div>
<div class="new" price='35' foodtype='Pasta'>Price: High , Type: Pasta </div>
<div class="new" price='45' foodtype='Pizza'>Price: Low , Type: Pizza </div>
<div class="new" price='25' foodtype='Pizza'>Price: High , Type: Pizza </div>

然后像这样应用jQuery

var price10 = $(".new").find("[price='10']");
var price20 = $(".new").find("[price='20']");
var price30 = $(".new").find("[price='30']");
var price40 = $(".new").find("[price='40']");
var price50 = $(".new").find("[price='50']");

这些变量将保存对特定食物的引用。 现在应用简单的 jQuery 显示和隐藏。

只要确保您的元素属性不与标准属性冲突。