在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) {

  if (e.checked) {

    document.getElementById(e.value + '-image').style.visibility = "visible";

  } else {

    document.getElementById(e.value + '-image').style.visibility = "hidden";

  }

}

然后在您的 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");

  if (element.checked) {

    image.style.visibility = "visible";

  } else {

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

    <img class="pizza olives" id="olives-image" src="pepperoni-transparent.png" />

  </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']")) {

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