Mehrere Checkbox Filterung mit Javascript

Question

Ich spiele herum und versuche, eine funzies-Website zu erstellen, die Rezepte auflisten wird, je nachdem, welche Zutaten Sie abhaken. Zum Beispiel, wenn ich ein Rezept habe, das Rindfleisch, Äpfel und Grünkohl verlangt, möchte ich nicht, dass es in den Resultaten erscheint, bis alle 3 Bestandteile überprüft worden sind.

Momentan gibt mein Skript alle Ergebnisse zurück, die mindestens eine der geprüften Zutaten enthalten.

Hier ist der relevante Teil des HTML-

    <h4>Meat</h4> 
        <label> 
         <input type="checkbox" name="meat" rel="bacon" id="bacon" /> Bacon 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="beef" id="beef" /> Beef 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="chicken" id="chicken" /> Chicken 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="dove" id="dove" /> Dove 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="ham" id="ham" /> Ham 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="pork" id="pork" /> Pork 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="quail" id="quail" /> Quail 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="salmon" id="salmon" /> Salmon 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="sausage" id="sausage" /> Sausage 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="scallops" id="scallops" /> Scallops 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="shrimp" id="shrimp" /> Shrimp 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="tilapia" id="tilapia" /> Tilapia 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="trout" id="trout" /> Trout 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="tuna" id="tuna" /> Tuna 
        </label> 
        <label> 
         <input type="checkbox" name="meat" rel="turkey" id="turkey" /> Turkey 
        </label> 

        <!-- checkboxes for vegetable type --> 
       <h4>Vegetables</h4> 
        <label> 
         <input type="checkbox" name="vegetables" rel="arugula" id="arugula" /> Arugula 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="broccolini" id="broccolini" /> Broccolini 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="cabbage" id="cabbage" /> Cabbage 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="celery" id="celery" /> Celery 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="collardGreens" id="collardGreens" /> Collard Greens 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="dill" id="dill" /> Dill 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="kale" id="kale" /> Kale 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="lettuce" id="lettuce" /> Lettuce 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="peas" id="peas" /> Peas 
        </label> 
        <label> 
         <input type="checkbox" name="vegetables" rel="spinach" id="spinach" /> Spinach 
        </label> 

       <!-- checkboxes for fruit type --> 
       <h4>Fruit</h4> 
        <label> 
         <input type="checkbox" name="fruit" rel="apple" id="apple" /> Apple 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="avocado" id="avocado" /> Avocado 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="banana" id="banana" /> Banana 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="blackberry" id="blackberry" /> Blackberry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="blueberry" id="blueberry" /> Blueberry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="cherry" id="cherry" /> Cherry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="coconut" id="coconut" /> Coconut 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="cranberry" id="cranberry" /> Cranberry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="grape" id="grape" /> Grape 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="raisin" id="raisin" /> Raisin 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="grapefruit" id="grapefruit" /> Grapefruit 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="lemon" id="lemon" /> Lemon 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="lime" id="lime" /> Lime 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="mango" id="mango" /> Mango 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="cantaloupe" id="cantaloupe" /> Cantaloupe 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="honeydew" id="honeydew" /> Honeydew 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="watermelon" id="watermelon" /> Watermelon 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="nectarine" id="nectarine" /> Nectarine 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="olive" id="olive" /> Olive 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="orange" id="orange" /> Orange 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="papaya" id="papaya" /> Papaya 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="peach" id="peach" /> Peach 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="pear" id="pear" /> Pear 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="plum" id="plum" /> Plum 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="prune" id="prune" /> Prune 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="pineapple" id="pineapple" /> Pineapple 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="pomegranate" id="pomegranate" /> Pomegranate 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="raspberry" id="raspberry" /> Raspberry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="strawberry" id="strawberry" /> Strawberry 
        </label> 
        <label> 
         <input type="checkbox" name="fruit" rel="tomato" id="tomato" /> Tomato 
        </label> 

      </div> 
     </div> 

     <div class="col-sm-8"> 

      <ul class="results"> 
       <li class="dinner bacon kale apple">Steak and Salad</li> 
       <li class="dinner">Result 2</li> 
       <li class="apple">Result 3</li> 
       <li class="arts video-games">Result 4</li> 
      </ul> 

     </div> 

und hier ist das aktuelle Skript verwende ich:

$(document).ready(function() { 
     $('.results > li').hide(); 

     $('div.tags').find('input:checkbox').live('click', function() { 
      $('.results > li').hide(); 
      $('div.tags').find('input:checked').each(function() { 
       $('.results > li.' + $(this).attr('rel')).show(); 
      }); 
     }); 
    }); 

Ich hoffe, dass jemand mich in die richtige Richtung zeigen kann und mir helfen aus.

Answer 1

Meine Antwort wäre, Events und EventListeners zu verwenden.

Hinzufügen eines EventListener zu einem Wrapper div-Element, das bei einem 'onClick' -Ereignis aktualisiert wird: da Events 'das DOM aufblähen, wenn ein verschachteltes Eingabeelement innerhalb dieses wrapper div angeklickt wird (eine Zutat für Ihre Zwecke) Das onClick-Ereignis wird "aufgebläht" und dann vom EventListener des enthaltenden Divs verarbeitet. Die nette Sache ist, dass das Ereignis Informationen über seine Quelle enthält (eine Eigenschaft namens target: https://developer.mozilla.org/en-US/docs/Web/API/Event/target), was das DOM-Element das Ereignis erzeugt hat) ... wir werden diese Tatsache später verwenden.

Zusätzlich zum Ereignis, haben Sie ein Objekt, das Eigenschaften hat die Namen Ihrer Zutaten und Werte von wahr/falsch (zeigt an, ob der Benutzer diese Zutat ausgewählt hat oder nicht). Verwenden Sie dann die ID des Ziels des Ereignisses (das Sie als Namen der Zutaten festgelegt haben) als Index für das Objekt.

Sie können dann das Objekt verwenden, um zu sehen, welche Rezepte mit den gegebenen Rezepten verwendet werden können (ein Weg besteht darin, jedes Rezept mit einer Reihe von Zutaten zu versehen, wie ich es getan habe).

Code:

//just here for visualization purposes 
var results = document.getElementById('results'); 
var canMakeDish = document.getElementById('canMakeDish'); 

var options = document.getElementById('options'); 

//object that keeps track of what the user has selected so far 
var selected = { 
    bacon: false, 
    beef: false, 
    chicken: false, 
    dove: false, 
    ham: false, 
    // and so on and so forth... 
}; 


//an example recipe's requirements 
var dishRequirements = ['bacon', 'beef', 'peas', 'mango']; 

options.addEventListener('click', (event) => { 
    //prevent the Event from travelling up the DOM 
    event.stopPropagation(); 
    //update our selected object with whatever the status of the clicked element was 
    selected[event.target.id] = event.target.checked; 
    //simply adds the id of the input element to the results for visualization of what is being affected 
    results.innerHTML = 'You just modified ' + event.target.id; 
    //Do your updating of results here 
    var dishValid = true; 
    dishRequirements.forEach((val) => { 
    if (!selected[val]) { 
     dishValid = false; 
    } 
    }); 

    if (dishValid) { 
    canMakeDish.innerHTML = "You can make the dish!" 
    } else { 
    canMakeDish.innerHTML = "You can't make the dish :("; 
    } 

}); 

JSFiddle für das Arbeitsbeispiel (der Abstand der Kontrollkästchen ist ein wenig wackelig, so stellen Sie sicher, dass Sie die richtigen Zutaten sind die Auswahl): https://jsfiddle.net/rtq92oyf/2

Verzeihen Sie mir, wenn meine Erklärung ist ein bisschen grob ... Ich bin gerade aus einer langen Schicht und ich bin ein bisschen müde. Ich würde mich freuen, Ihnen ein anderes Mal zu erklären, wenn Sie möchten!