时间戳

首页 > 解决方案 > 如何让多个元素与 JavaScript 一起使用？

javascript - 如何让多个元素与 JavaScript 一起使用？

问题描述

因此，当我单击复选框时，背景颜色会发生变化。我希望此功能适用于所有复选框，但目前仅适用于第一个复选框。

function obtained() {
  var obt = document.getElementsByClassName("obtained")[0];
  var col = document.getElementsByClassName("entry")[0];
  if (obt.checked == true) {
    col.style.backgroundColor = "#2ab320";
  } else {
    col.style.backgroundColor = "#d3d5db";
  }
}
<div class="entry">
  <img class="class-name" src="image1.png">
  <b>title1</b><br>content1
  <input 
    type="checkbox" 
    class="obtained" 
    onclick="obtained()" 
    name="obtained"
  >
</div><hr>
<div class="entry">
  <img class="class-name" src="image2.png">
  <b>title2</b><br>content2
  <input 
    type="checkbox" 
    class="obtained" 
    onclick="obtained()" 
    name="obtained"
  />
</div><hr>
<div class="entry">
  <img class="class-name" src="image3.png">
  <b>title3</b><br>content3
  <input 
    type="checkbox" 
    class="obtained" 
    onclick="obtained()" 
    name="obtained"
  />
</div><hr>

标签： javascript

解决方案

在这种情况下，您应该声明一个辅助函数：

function makeTogglable(element) {
  const obt = element.querySelector(".obtained");
  obt.addEventListener("click", () => {
    if(obt.checked == true) {
      element.style.backgroundColor = "#2ab320";
    } else {
      element.style.backgroundColor = "#d3d5db";
    }
  });
}

然后你可以将它应用到你的 HTML 元素中，例如：

document.querySelectorAll('.entry').forEach(e => makeTogglable(e));

编辑：忘记了听众

推荐阅读