javascript - 使用 JavaScript 创建可用于特定类的按钮函数

Question

最终，我的目标是创建一个可用于测验的 JS 脚本。在一个页面中，我可能会放置多个项目。对此，我将有多个按钮，每个项目一个按钮。您在这里看到的是一个原型(prototype)。 (我想看看每个元素如何相互作用。)在尝试让它发挥作用的过程中，我查看了其他人所做的事情。然而，我已经陷入了困境，看不到自己做错了什么。我知道问题出在哪里，但我不确定。无论如何，请看看我的错误在哪里并告诉我。

这是html部分。我想要发生的事情是单击顶部按钮，顶部文本的背景“Hello”变成红色。我按中间，文字背景变成红色，等等。目前，我按下任何按钮，它们都会变成红色。

<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>
<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>
<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>

js脚本的链接位于head部分。

<script src="../js/s3.js"></script>

这里是js。我怀疑我的错误是在下半场。原因是我在第二个中创建的 var 与第一个中的相同，但仍然得到相同的结果。这让我想知道计算机是否忽略了这部分。我可能是错的。我尝试了querySelectorAll，结果也是一样的。顺便问一下，如果涉及到类，什么时候使用querySelectorAll和getElementsByClassName比较有利？

window.onload = function () {
  let c = document.getElementsByClassName('q');
  for (var ii = 0; ii < c.length; ii++) {
    c[ii].addEventListener('click', function () {
    let a = document.getElementsByClassName('p');
  for (var i = 0; i < a.length; i++) {
    a[i].classList.add('cellRed');
   }
  });
 } 
}

这是 CSS。

.cellGreen {
    background-color: green;
    color: white;
}

.cellRed {
    background-color: red;
    color: white;
}

我被告知要把事情分开。所以我就这么做了。

Answer 1

解决问题时，您应该做的第一件事是思考您要实现的目标。按步骤列出确实很有帮助。

• 在每个问题 div
  • 获取按钮
  • 获取段落
  • 当按钮被点击时
    • 将段落变成红色

<小时/>

这使我们能够从第 1 步开始构建代码。 这并不总是完美的，但它总是有帮助。

<小时/>

获取所有问题

let questions = document.querySelectorAll(".q");

对于每个问题

questions.forEach(question => {

    // ... do something

});

获取按钮

questions.forEach(question => {

  let btn = question.querySelector("button");

});

获取段落

questions.forEach(question => {

  let btn = question.querySelector("button");
  let p = question.querySelector("p");

});

单击按钮时

questions.forEach(question => {

  let btn = question.querySelector("button");
  let p = question.querySelector("p");

  btn.addEventListener("click", function() { 

     // ... do something

  });

});

将段落变成红色

questions.forEach(question => {

  let btn = question.querySelector("button");
  let p = question.querySelector("p");

  btn.addEventListener("click", function() { 

     p.classList.add("cellRed");

  });

});

<小时/>

最终示例:

window.onload = function() {
  let questions = document.querySelectorAll(".q");

  questions.forEach(question => {
    let btn = question.querySelector("button");
    let p = question.querySelector("p");

    btn.addEventListener("click", function() {
      p.classList.add('cellRed');
    });
  })
}

.cellGreen {
  background-color: green;
  color: white;
}

.cellRed {
  background-color: red;
  color: white;
}

<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>
<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>
<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>