javascript - 相对迭代类中的dom元素

Question

我正在使用 jquery 进行测验，并希望能够相对更改问题类中所有按钮元素的颜色。我见过的许多示例都展示了如何以绝对方式执行此操作——这意味着一个类的所有 实例的所有元素都会改变颜色。您如何遍历 div 类的单个实例？

function clickFn() {
  console.log('in click event')
  $( "button" ).each(function() {
    if ($(this)
        $(this).toggleClass( "buttonSelected" );
  });
};

.button {
  background-color: grey;
  border: none;
  color: white;
  width: 20vw;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.buttonSelected {
  background-color: #f00;
  border: none;
  color: white;
  width: 20vw;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='question'>
  <span class='question_body' onclick="clickFn()">Question n </span></p>
<button class="button" onclick="clickFn()">Wrong Answer</button></p>
<button class="button" onclick="clickFn()">Correct Answer</button></p>
<button class="button" onclick="clickFn()">Wrong Answer</button></p>
<button class="button" onclick="clickFn()">Wrong Answer</button></p>
</div>
<div id='question'>
  <span class='question_body'>Question n </span></p>
<button class="button">Wrong Answer</button></p>
<button class="button">Correct Answer</button></p>
<button class="button">Wrong Answer</button></p>
<button class="button">Wrong Answer</button></p>
</div>

这会改变颜色

Answer 1

1. if($(this) 中存在语法错误(缺少大括号)
2. 不要对多个元素使用相同的 id 属性。它是一个标识符，因此应该是唯一的。

3. 不需要循环。只需使用 .parent()或 .closest('div')

4. (旁注) It's not a good practice to use javascript attributes

---

这是你想要的吗？

$(".button").click(function(){
   $(this).parent().find('.button').toggleClass("buttonSelected")
   .end().find('.good').toggleClass("buttonGood");
});

// Or .closest():
// $(".button").click(function() {
//    $(this).closest('div').find('.button').toggleClass("buttonSelected")
//    .end().find('.good').toggleClass("buttonGood");
// });

.button {
    background-color: grey;
    border: none;
    color: white;
    width: 20vw;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.buttonSelected {
    background-color: #f00;
}
.buttonGood {
    background-color: #66ff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id='question1'>
    	<span class='question_body'>Question n </span></p>
    	<button class="button">Wrong Answer</button></p>
    	<button class="button good">Correct Answer</button></p>
    	<button class="button">Wrong Answer</button></p>
    	<button class="button">Wrong Answer</button></p>
    </div>
    <div id='question2'>
    	<span class='question_body'>Question n </span></p>
    	<button class="button">Wrong Answer</button></p>
    	<button class="button good">Correct Answer</button></p>
    	<button class="button">Wrong Answer</button></p>
    	<button class="button">Wrong Answer</button></p>
    </div>