複数のチェックボックスでJavaScriptを使用してフィルタリングする

Question

私は周りを遊んでいて、チェックしている成分に応じてレシピを表示するfunziesウェブサイトを作成しようとしています。例えば、牛肉を必要とするレシピがある場合、リンゴとケールは、3つの成分すべてがチェックされるまで結果に表示したくありません。

現在、私のスクリプトは、少なくとも1つのチェックされた食材を持つすべての結果を返します。ここで

が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> 

、ここでの関連部分は、私が使用している現在のスクリプトです：

$(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(); 
      }); 
     }); 
    }); 

私は、誰かが正しい方向に私を指すと私を助けることができる期待していますでる。

Answer 1

私の答えは、イベントとイベントリスナーを使用することです。

'onClick'イベントで更新されるいくつかのラッパーdiv要素にEventListenerを追加する：イベントはそのバッチdiv内でクリックされたDOMをバブルアップするので（あなたの目的のために成分） onClickイベントは「バブルアップ」し、それを含むdivのEventListenerによって処理されます。見事なことは、イベントにはそのソースに関する情報（target：https://developer.mozilla.org/en-US/docs/Web/API/Event/targetというプロパティ、これはDOM要素がイベントを生成したものです）が含まれることです。後でこのファクトを使用します。

イベントに加えて、成分の名前とtrue/falseの値（ユーザーがその成分を選択したかどうかを示す）のプロパティを持つオブジェクトがあります。次に、オブジェクトのインデックスとしてイベントのターゲットのID（原料名として設定したもの）を使用します。

次に、オブジェクトを使用して、指定されたレシピでどのレシピを使用できるかを確認できます（1つの方法は、各レシピに成分の配列があることです）。

コード：ワーキング例えば

//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（チェックボックスの間隔が少しグラグラですので、あなたは右の原料を選択していることを確認してください）：https://jsfiddle.net/rtq92oyf/2

私の説明なら、私を許してちょっと荒いです...私はちょうど長いシフトを乗り越え、少し疲れました。あなたが望むなら、もう少し時間を説明して嬉しいです！