在Javascript中检查多个复选框状态时如何防止重复代码？

Question

我正在制作一种复选框，当“选中”属性为真或假时显示图像。第一个复选框现在可以使用，但我不清楚如何减少所需的代码量，因为每个复选框基本上都做同样的事情。

我必须显示图像的工作功能如下所示：

const pepperoniCheckbox = document.getElementById("pepperoniCheckbox");

const pepperoniImage = document.getElementById("pepperoni-image");

document.getElementById("pepperoniCheckbox").onclick = function() {

  if (this.checked) {

    pepperoniImage.style.visibility = "visible";

  } else {

    pepperoniImage.style.visibility = "hidden";

  }

};

图像和复选框的 HTML 也在这里：

<div class="ingredients-boxes" style="padding-top: 200px">

  <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" id="pepperoni-image" src="pepperoni-transparent.png" />

  </div>

</main>

我确信有一种方法可以为我添加的未来复选框和内容复制这种效果，但我无法绕开它。我认为每个复选框都需要有一个 onclick 事件，它们都指向同一个函数，而不是像我上面所做的那样将函数放在每个复选框变量上。

Answer 1

有很多方法可以做到这一点，但一个简单的方法是：创建一个 JS 函数，该函数将元素作为选项并使用它来构建 id（假设您保持一致的命名约定）：function isChecked(e) {&nbsp; if (e.checked) {&nbsp; &nbsp; document.getElementById(e.value + '-image').style.visibility = "visible";&nbsp; } else {&nbsp; &nbsp; document.getElementById(e.value + '-image').style.visibility = "hidden";&nbsp; }}然后在您的 HTML 中，onclick为每个元素添加一个：<input type="checkbox" value="pepperoni" id="pepperoniCheckbox" onclick="isChecked(this);"/>

Answer 2

回答您可以将所谓的事件委托与Element.prototype.matches和event.target一起使用。工作示例：（注意：我从父 div 中删除了填充以更好地适应演示）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");&nbsp; if (element.checked) {&nbsp; &nbsp; image.style.visibility = "visible";&nbsp; } else {&nbsp; &nbsp; image.style.visibility = "hidden";&nbsp; }}});<div class="ingredients-boxes">&nbsp; <input type="checkbox" value="pepperoni" id="pepperoniCheckbox" />&nbsp; <label for="pepperoni"> Pepperoni </label>&nbsp; <input type="checkbox" value="olives" id="olivesCheckbox" />&nbsp; <label for="olives"> Olives </label></div><main>&nbsp; <div class="pizza-holder">&nbsp; &nbsp; <img class="pizza" src="pizza-hut-crust-pan-pizza-food-delivery-pizza.jpg" />&nbsp; &nbsp; <img class="pizza pepperoni" id="pepperoni-image" src="pepperoni-transparent.png" />&nbsp; &nbsp; <img class="pizza olives" id="olives-image" src="pepperoni-transparent.png" />&nbsp; </div></main>

Answer 3

解释：事件委托将事件侦听器添加到父元素。此事件侦听器监视事件。当事件发生时，它会检查哪些子元素导致了该事件。活动元素在 中可用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']")) {&nbsp; &nbsp;// do something}});使用事件委托时的重要一点是，您要为想要操作的项目保持相同的命名约定。在您的情况下，图像的ID始终是element.value + "-image"visibility因此，我们可以在事件监听器中查找元素并调整它。const image = document.querySelector("#" + element.value + "-image");&nbsp; if (element.checked) {&nbsp; &nbsp; image.style.visibility = "visible";&nbsp; } else {&nbsp; &nbsp; image.style.visibility = "hidden";&nbsp; }}完整代码：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");&nbsp; if (element.checked) {&nbsp; &nbsp; image.style.visibility = "visible";&nbsp; } else {&nbsp; &nbsp; image.style.visibility = "hidden";&nbsp; }}});建议：给你所有的顶级图像一个类，以便它们加载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");&nbsp; if (element.checked) {&nbsp; &nbsp; image.style.visibility = "visible";&nbsp; } else {&nbsp; &nbsp; image.style.visibility = "hidden";&nbsp; }}});.topping {&nbsp;visibility: hidden;}<div class="ingredients-boxes">&nbsp; <input type="checkbox" value="pepperoni" id="pepperoniCheckbox" />&nbsp; <label for="pepperoni"> Pepperoni </label>&nbsp; <input type="checkbox" value="olives" id="olivesCheckbox" />&nbsp; <label for="olives"> Olives </label></div><main>&nbsp; <div class="pizza-holder">&nbsp; &nbsp; <img class="pizza" src="pizza-hut-crust-pan-pizza-food-delivery-pizza.jpg" />&nbsp; &nbsp; <img class="pizza pepperoni topping" id="pepperoni-image" src="pepperoni-transparent.png" />&nbsp; &nbsp; <img class="pizza olives topping" id="olives-image" src="pepperoni-transparent.png" />&nbsp; </div></main>缓存示例：const parent = document.querySelector(".ingredients-boxes");parent.addEventListener("click", function(event) {if(!this.cache) {&nbsp;this.cache = {};}const element = event.target;if(element.matches("input[type='checkbox']")) {const topping = element.value;let image = this.cache[topping];if(!image) {&nbsp;image =&nbsp;&nbsp;this.cache[topping] =&nbsp;&nbsp;document.querySelector("#" + element.value + "-image");}&nbsp; if (element.checked) {&nbsp; &nbsp; image.style.visibility = "visible";&nbsp; } else {&nbsp; &nbsp; image.style.visibility = "hidden";&nbsp; }}});.topping {&nbsp;visibility: hidden;}<div class="ingredients-boxes">&nbsp; <input type="checkbox" value="pepperoni" id="pepperoniCheckbox" />&nbsp; <label for="pepperoni"> Pepperoni </label>&nbsp; <input type="checkbox" value="olives" id="olivesCheckbox" />&nbsp; <label for="olives"> Olives </label></div><main>&nbsp; <div class="pizza-holder">&nbsp; &nbsp; <img class="pizza" src="pizza-hut-crust-pan-pizza-food-delivery-pizza.jpg" />&nbsp; &nbsp; <img class="pizza pepperoni topping" id="pepperoni-image" src="pepperoni-transparent.png" />&nbsp; &nbsp; <img class="pizza olives topping" id="olives-image" src="pepperoni-transparent.png" />&nbsp; </div></main>