我正在玩并尝试创建一个funzies网站，根据您检查的成分列出食谱。例如，如果我的食谱需要牛肉，苹果和羽衣甘蓝，我不希望它出现在结果中，直到检查了所有3种成分。
目前，我的脚本将返回至少包含一个已检查成分的所有结果。
这是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();
});
});
});
我希望有人能指出我正确的方向并帮助我。
答案 0 :(得分：0)
我的回答是使用Events和EventListeners。
将EventListener添加到某个包装器div元素，该元素将在＆＃39; onClick＆＃39;上更新。事件：因为事件发生了泡沫＆＃39; DOM，如果在该包装div（一个成分，为了你的目的）中点击了任何嵌套的输入元素，那么onClick事件将会冒出来＃39;然后由包含div的EventListener处理。漂亮的是，Event将包含有关其源的信息（一个名为target的属性：https://developer.mozilla.org/en-US/docs/Web/API/Event/target），这是DOM元素生成事件的内容）......我们稍后会使用这个事实。
除了Event之外，还有一个对象具有属性名称和true / false值（指示用户是否选择了该成分）。然后，使用Event的目标ID（您已将其设置为成分名称）作为对象的索引。
然后，您可以使用该对象查看哪些食谱可以与给定食谱一起使用（一种方法是让每个食谱都有一系列成分，就像我一样）。
代码：
//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
请原谅我，如果我的解释有点粗糙......我离开了很长一段路，而且我有点累。如果你愿意，我很乐意再解释一次！