Question

I'm making a quiz using jquery and would like to be able to change the color of all the button elements in a question class relatively. Many examples I've seen show how to do it in an absolute manner--meaning all the elements of all instances of a class change color. How do you iterate through a single instance of div class?

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>

This will change the color

Answer 1

$password = $_POST['password']（缺少大括号）
不要对多个元素使用相同的if($(this)属性。它是标识符，因此应该是唯一的。
无需循环。只需使用.parent()或.closest('div')
（附注） It's not a good practice to use javascript attributes

这是你想要的吗？

id

$(".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;
}

Answer 2

<div id="container">
<div class="questions">
  <button>Correct Answer</button>
  <button>Wrong Answer</button>
  <button>Correct Answer</button>
  <button>Wrong Answer</button>
</div>

<div class="questions">
  <button>Correct Answer</button>
  <button>Wrong Answer</button>
  <button>Correct Answer</button>
  <button>Wrong Answer</button>
</div>
</div>




<script type="text/javascript">
$('#container button').each(function(){
    $(this).on('click', function(){
        var allButtons = $(this).parent().find('button'); 
        console.log(allButtons);
         $(allButtons).each(function(){
        $(this).toggleClass( "buttonSelected" );
      });
  });
});
</script>

Answer 3

首先，id属性在同一文档中应该是唯一的，因此最好用类替换ID question：

<div class='question'>

然后，如果你避免内联事件lile onClick()并在每个按钮的末尾删除额外的</p>会更好，所以你的代码将是正确的，更具可读性：

<div class='question'>
    <span class='question_body'>Question n </span>
    <button class="button">Wrong Answer</button>
    <button class="button">Correct Answer</button>
    <button class="button">Wrong Answer</button>
    <button class="button">Wrong Answer</button>
</div>
<div class='question'>
    <span class='question_body'>Question n </span>
    <button class="button">Wrong Answer</button>
    <button class="button">Correct Answer</button>
    <button class="button">Wrong Answer</button>
    <button class="button">Wrong Answer</button>
</div>

而是在您的javascript代码中创建点击事件，并使用 siblings 方法代替parent()和each()来更改同级别中的按钮类点击一个：

$('body').on('click', 'button', function(){
    if( $(this).hasClass('clicked') ){
        $(this).removeClass('clicked');
        $(this).siblings('button').removeClass('buttonSelected clicked');
    }else{
        $(this).removeClass('buttonSelected').addClass('clicked');
        $(this).siblings('button').removeClass('clicked').addClass('buttonSelected');
    }
});

希望这有帮助。

工作代码段

＆＃13;

$('body').on('click', 'button', function(){
  if( $(this).hasClass('clicked') )
  {
    $(this).removeClass('clicked');
    $(this).siblings('button').removeClass('buttonSelected clicked');
  }else{
    $(this).removeClass('buttonSelected').addClass('clicked');
    $(this).siblings('button').removeClass('clicked').addClass('buttonSelected');
  }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Iterating through dom elements in a class relatively

3 个答案:

工作代码段