有複選框顯示某些東西？

Question

完全不知道如何做到這一點或從哪裏開始。但是，我想爲它使用jQuery。

我想要一個約300個項目的列表。每個項目從一個到幾個不同的類別分配。

E.g：

項目：

香蕉，橙子 ， 奶酪，蛋糕

分類

水果， 黃色，棕色 ， 或者安格， 甜品

的項目將被分配了類似以下內容：

香蕉 - 黃色，水果

橙子 - 橘子，水果

奶酪 - 黃色

蛋糕 - 布朗，甜品

。

我需要能夠勾選複選框的任意組合 - 例如，如果我勾選'黃色和水果'，它會顯示橙子，香蕉和奶酪。 （注意，我需要所有東西都是黃色加所有東西都是水果，而不是隻有黃色水果）。或者，如果我只勾選黃色，它會顯示奶酪和香蕉。如果我點了甜點和橙色，它會顯示蛋糕和橙子。希望你能理解我的意思。

我真的很感謝任何見解或幫助如何做到這一點，謝謝。

Answer 1

Matt B.既然您是網絡開發的新手，讓我告訴您一個解決方案，我認爲您可以從我的經驗中找到最適合您的解決方案。你是web開發新手，所以我建議你不要使用MySql作爲數據庫，PHP作爲邏輯基礎...所以我認爲你必須關注HTML，CSS現在讓我引導你做什麼爲達到這一目標，積分是... 1。創建具有結構的HTML文件中像這樣

<input class="yFruit" type="checkbox" value="YellowFruit"> Yellow Fruit<br> 
<input class="rFruit" type="checkbox" value="RedFruit"> Red Fruit<br> 
<div class="itemsContainer"> 
    <div class="item" data-category="YellowFruit"> Banana </div> 
    <div class="item" data-category="RedFruit"> Apple </div> 
</div> 

使用CSS，你喜歡

的風格，這些元素現在是時候爲Javascript

你知道javascripts事件在這種情況下非常有用，就像當我點擊某物時，我可以檢測到我單擊的是什麼elemenet。所以當我們選擇其中一個用html創建的複選框時，我們可以看到它與所有元素匹配的值（在這種情況下，所有的水果都帶有class =「item」），我們可以爲每個元素添加css屬性項目也喜歡，如果我們想隱藏一些我們可以做到的元素，現在讓我們看看代碼。

// JS Code 
// assigning all the checkbox in variables 
var yFruit = document.querySelector(".yFruit"); 
var rFruit = document.querySelector(".rFruit"); 
// allItems is an array containing all the item elements in it 
var allItems= document.querySelectorAll(".item"); 

// creating a function to only show the yFruit 
function showYFruitOnly(){ 
    for (i = 0; i < allItems.length; i++) { 
     if(allItems[i].getAttribute("data-category") == "YellowFruit"){ 
      // display only if it is from yellow fruit category 
      allItem[i].style.display = "block"; 
     }else{ 
      // do not display if it is not from that category 
      allItem[i].style.display = "none"; 
     } 
    } 
} 

// code below this line is checking if yFruit is checked or not 
//every time some one clicks on it 
// if it is checked then the code is running 
yFruit.onchange = function(){ 
if(yFruit.checked == true){ 
    // running the showYFruitOnly function if checkbox is checked 
    showYFruitOnly; 
} 
} 

您可以創建更多的情況下更fuctions等等等試試這個，我敢打賭，你會學到很多做這個....

Answer 2

我會製作一個對象數組，其中每個對象都有一個name屬性和一個categories屬性，該屬性是一個字符串數組，其中每個字符串都是該對象所屬的類別名稱。然後，您可以檢查選中哪個類別複選框，然後遍歷所有對象，只顯示在其「類別」屬性中包含所有選定類別的對象。您可以通過創建具有選定對象屬性的循環來顯示它們。你可以使用內循環for循環for像這樣找到合適的對象：

僞代碼：

//loop through the array of objects 
// for ever element, loop through its `categories` property and check if 
// it has the current element in the array of selected categories 
// (`selected`). Then, do that for every element in `selected` 

我知道這可能看起來混亂，我道歉，如果是這樣，但我希望它能幫助。