I am playing around and trying to create a funzies website that will list recipes depending on what ingredients you check off. For example, if i have a recipe that requires beef, apples and kale i dont want it to show up in the results until all 3 ingredients have been checked.
Currently my script will return all results that have at least one of the checked ingredients.
Here is the relevant part of the 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>
and here is the current script i am using:
$(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();
});
});
});
I am hoping someone can point me in the right direction and help me out.
Aucun commentaire:
Enregistrer un commentaire