How to change the color of the div once by once? Question about selecting rule in jQuery

user_14103074 0
Viewed 76

I am new to jquery. I am confused by the selecting rule in jquery. I create 3 questions and want user to click the answer. The div of the color change blue if correct and red if wrong. However, if i just click the correct answer on the first question, all of the color of the div of wrong answer have also changed. What should I do?

Thanks for seeing, highly appreciated! 

$(".correct ").click(function() {
  $(this).css('background-color', '#b8daff');
  $(".wrong").css('background-color', '#f5c6cb');
});
.correct,
.wrong {
  padding: 5px;
  text-align: center;
  background-color: #b1dfbb;
  border: solid 1px #c3c3c3;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>QUESTION</p>
<div class="question">
  <div class="d-flex inline">
    <div class="w-50 correct">A. Correcrt Answer</div>
    <div class="w-50 wrong">B. Wrong answer </div>
  </div>
</div>
<p>QUESTION</p>
<div class="question">
  <div class="d-flex inline">
    <div class="w-50 correct">A. Correcrt Answer</div>
    <div class="w-50 wrong">B. Wrong answer </div>
  </div>
</div>
<p>QUESTION</p>
<div class="question">
  <div class="d-flex inline">
    <div class="w-50 correct">A. Correcrt Answer</div>
    <div class="w-50 wrong">B. Wrong answer </div>
  </div>
</div>

Image for demo

css html jquery javascript
3 Answers

Do this :

$(".correct ").click(function() {
  $(this).css('background-color', '#b8daff');
  $(this).next().css('background-color', '#f5c6cb');
});
user_140461260

This should work for you:

$(".correct").click(() => {
  $(this).css('background-color', '#b8daff');
  $(this).next().css('background-color', '#f5c6cb');
});
user_113042480

This line of code is selecting all wrong answers:

$(".wrong").css('background-color', '#f5c6cb');

You need to find the wrong answer associated with the question (not just the answer next to the correct one). You can do that by using $(this).parent() to get the question and then find(.wrong) will find it's child that has the "wrong" class.

$(this).parent().find(".wrong").css('background-color', '#f5c6cb');

Working snippet (Updated to show it working with different orders and multiple options):

$(".correct ").click(function() {
  $(this).css('background-color', '#b8daff');
  $(this).parent().find(".wrong").css('background-color', '#f5c6cb');
});
.correct,
.wrong {
  padding: 5px;
  text-align: center;
  background-color: #b1dfbb;
  border: solid 1px #c3c3c3;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>QUESTION</p>
<div class="question">
  <div class="d-flex inline">
    <div class="w-50 correct">A. Correcrt Answer</div>
    <div class="w-50 wrong">B. Wrong answer </div>
  </div>
</div>
<p>QUESTION</p>
<div class="question">
  <div class="d-flex inline">
    <div class="w-50 wrong">A. Wrong answer </div>
    <div class="w-50 correct">B. Correcrt Answer</div>
  </div>
</div>
<p>QUESTION</p>
<div class="question">
  <div class="d-flex inline">
    <div class="w-50 wrong">A. Wrong answer </div>
    <div class="w-50 wrong">B. Wrong answer </div>
    <div class="w-50 correct">C. Correcrt Answer</div>
    <div class="w-50 wrong">D. Wrong answer </div>
  </div>
</div>

UPDATE: (As Carsten asked in their comment below)

Presumably the correct answer isn't always going to be the first answer (that wouldn't be very effective!) - or even the next answer if there are more than 2 answers to the question.

The reason I have suggested this approach rather than just using next() is because it will find the wrong answer regardless of where it is or how many other answers there are for the question (e.g. it will still work if you have 2 or 3 wrong answers)

user_5148780
Related