解釋：
事件委托將事件偵聽器添加到父元素。
此事件偵聽器監視事件。當事件發生時，它會檢查哪些子元素導致了該事件。
活動元素在 中可用event.target。
parent.addEventListener(function(event) {
const element = event.target;
});
我們可以使用Element.prototypematches的方法檢查該元素是否是我們正在尋找的元素
例如，在您的情況下，我們正在尋找checkboxes。
parent.addEventListener(function(event) {
const element = event.target;
if(element.matches("input[type='checkbox']")) {
// do something
}
});
使用事件委托時的重要一點是，您要為想要操作的項目保持相同的命名約定。
在您的情況下，圖像的ID始終是element.value + "-image"
visibility因此，我們可以在事件監聽器中查找元素并調整它。
const image = document.querySelector("#" + element.value + "-image");
if (element.checked) {
image.style.visibility = "visible";
} else {
image.style.visibility = "hidden";
}
}
完整代碼：
const parent = document.querySelector(".ingredients-boxes");
parent.addEventListener("click", function(event) {
const element = event.target;
if(element.matches("input[type='checkbox']")) {
const image = document.querySelector("#" + element.value + "-image");
if (element.checked) {
image.style.visibility = "visible";
} else {
image.style.visibility = "hidden";
}
}
});
建議：
給你所有的頂級圖像一個類，以便它們加載hidden。
緩存圖像元素，這樣您就不必每次單擊復選框時都搜索 DOM。
頂級課程 - 最初隱藏的示例：
const parent = document.querySelector(".ingredients-boxes");
parent.addEventListener("click", function(event) {
const element = event.target;
if(element.matches("input[type='checkbox']")) {
const image = document.querySelector("#" + element.value + "-image");
if (element.checked) {
image.style.visibility = "visible";
} else {
image.style.visibility = "hidden";
}
}
});
.topping {
visibility: hidden;
}
<div class="ingredients-boxes">
<input type="checkbox" value="pepperoni" id="pepperoniCheckbox" />
<label for="pepperoni"> Pepperoni </label>
<input type="checkbox" value="olives" id="olivesCheckbox" />
<label for="olives"> Olives </label>
</div>
<main>
<div class="pizza-holder">
<img class="pizza" src="pizza-hut-crust-pan-pizza-food-delivery-pizza.jpg" />
<img class="pizza pepperoni topping" id="pepperoni-image" src="pepperoni-transparent.png" />
<img class="pizza olives topping" id="olives-image" src="pepperoni-transparent.png" />
</div>
</main>
緩存示例：
const parent = document.querySelector(".ingredients-boxes");
parent.addEventListener("click", function(event) {
if(!this.cache) {
this.cache = {};
}
const element = event.target;
if(element.matches("input[type='checkbox']")) {
const topping = element.value;
let image = this.cache[topping];
if(!image) {
image =
this.cache[topping] =
document.querySelector("#" + element.value + "-image");
}
if (element.checked) {
image.style.visibility = "visible";
} else {
image.style.visibility = "hidden";
}
}
});
.topping {
visibility: hidden;
}
<div class="ingredients-boxes">
<input type="checkbox" value="pepperoni" id="pepperoniCheckbox" />
<label for="pepperoni"> Pepperoni </label>
<input type="checkbox" value="olives" id="olivesCheckbox" />
<label for="olives"> Olives </label>
</div>
<main>
<div class="pizza-holder">
<img class="pizza" src="pizza-hut-crust-pan-pizza-food-delivery-pizza.jpg" />
<img class="pizza pepperoni topping" id="pepperoni-image" src="pepperoni-transparent.png" />
<img class="pizza olives topping" id="olives-image" src="pepperoni-transparent.png" />
</div>
</main>
