Saya memiliki tombol di mana Anda dapat memilih bahan mana yang akan disaring

//index.html

<div class="submenu">
    <input type="checkbox" class="filter-item" id="olive" onclick="filter()" />
    <label for="olive">
        <img alt="olive" src="img/png/pizza/olive.png" />
    </label>
    <input type="checkbox" class="filter-item" id="shrimp" onclick="filter()" />
    <label for="shrimp">
        <img alt="shrimp" src="img/png/pizza/shrimp.png" />
    </label>
    <input type="checkbox" class="filter-item" id="mushroom" onclick="filter()" />
    <label for="mushroom">
        <img alt="mushroom" src="img/png/pizza/champion.png" />
    </label>
    <input type="checkbox" class="filter-item" id="pepperoni" onclick="filter()" />
    <label for="pepperoni">
        <img alt="pepperoni" src="img/png/pizza/pepperoni.png" />
    </label>
    <footer id="filter-text">no filter applied</footer>
</div>

Dan item menu (pizza)

//index.html

<div class="menu-container">
    <img id="olive-pizza" class="menu-item olive" alt="olive" />
    <img id="pepperoni-pizza" class="menu-item pepperoni" alt="pepperoni" />
    <img id="shrimp pizza" class="menu-item shrimp" alt="shrimp" />
    <img class="menu-item mushroom" alt="mushroom" />
    <img class="menu-item olive pepperoni" alt="olive, pepperoni" />
    <img class="menu-item olive shrimp mushroom" alt="olive, shrimp, mushroom" />
</div>

Saya ingin menampilkan semua pizza yang mencakup semua bahan yang dipilih. Misalnya, jika bahan zaitun dan udang yang dipilih hanya menunjukkan pizza yang setidaknya memiliki kedua kelas tersebut.

Ide saya adalah meletakkan semua bahan yang dipilih dalam array itemsToFilter, lalu membandingkan setiap item dalam array itu dengan kelas setiap pizza dan kemudian menampilkan pizza "sisa".

Berikut adalah fungsinya:

var itemsToFilter = [];

//HTMLCollections, not arrays
ingredients = document.getElementsByClassName("filter-item"); 
pizzas = document.getElementsByClassName("menu-item");

function filter() {
    for (var i = 0; i < ingredients.length; i++) {
        if (ingredients[i].checked == true) {
            //add checked item to array itemsToFilter
            if (itemsToFilter.includes(ingredients[i].getAttribute("id")) == false) {
                itemsToFilter.push(ingredients[i].getAttribute("id"));
            }
        } else {
            //remove unchecked item from array itemsToFilter
            for (var y = itemsToFilter.length - 1; y >= 0; y--) {
                if (itemsToFilter[y] === ingredients[i].getAttribute("id")) {
                    if (itemsToFilter.includes(ingredients[i].getAttribute("id")) == true) {
                        itemsToFilter.splice(y, 1);
                    }
                }
            }
        }
        //show pizzas with classes that match items in array itemsToFilter
        for (var i = 0; i < pizzas.length; i++) {
            for (y in itemsToFilter) {
                if (pizzas[i].classList.contains(itemsToFilter[y]) == false) {
                    if (pizzas[i].classList.contains("show") == true) {
                        pizzas[i].classList.remove("show");
                    }
                    break;
                } else {
                    pizzas[i].classList.add("show");
                }
            }
        }
    }
}

Ini bekerja sampai tingkat tertentu. Ini hanya berfungsi pada bahan pertama "zaitun", di mana ia menambahkan pertunjukan kelas dengan benar, namun tidak menghapus kelas ketika kotak centang tidak dicentang. Bahan-bahan lain bahkan tidak ditambahkan ke array itemsToFilter.

Ada yang punya pendekatan?

0
user5086974 16 Oktober 2019, 21:18

2 jawaban

Jawaban Terbaik

... Saya tidak sengaja meletakkan for loop yang menunjukkan pizza di dalam for loop yang berputar melalui tombol bahan. Saya memindahkannya satu langkah dan juga memindahkan bagian yang menghapus kelas pertunjukan dari pizza sebelum loop for yang mengulang array itemsToFilter karena itu tidak akan menghapus kelas show jika array kosong. Terima kasih semua dengan ramah.

0
user5086974user5086974 16 Oktober 2019, 19:03

Saya menulis ulang kode Anda dan melakukan beberapa perubahan:

var itemsToFilter = [];

//HTMLCollections, not arrays
ingredients = document.getElementsByClassName("filter-item"); 
pizzas = document.getElementsByClassName("menu-item");

function filter() {
    // Here you have always only the selected ingredients
    let selectedIngredients = ingredients.filter(ingredient => ingredient.checked === true);

    if(selectedIngredients.length === 0) {
        pizzas.forEach(pizza => {
             pizza.classList.add("show");
        });
    } else {
        pizzas.forEach(pizza => {
            let hasAllIngredients = true;
            selectedIngredients.forEach(ingredient => {
                if(!pizza.classList.includes(ingredient.getAttribute("id"))) {
                    hasAllIngredients = false;
                }
            });

            if(hasAllIngredients) {
                pizza.classList.add("show");
            } else {
                pizza.classList.remove("show");
            }
        });
    }
}
0
Simone Boccato 16 Oktober 2019, 19:19