勾選復選框時隱藏 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 顯示和隱藏。

只要確保您的元素屬性不與標准屬性沖突。