进行简单的多项选择测验HTML / JQUERY

Question

I'm currently making a basic review test for myself and it looks something like this:

HTML -

<form class="q">
  <h4>1. question 1 </h4>
  <input name="test" type="radio" value="inc" /> A) 1
  <input name="test" type="radio" value="ans"/> B) 2
  <input name="test" type="radio" value="inc" /> C) 3
  <input name="test" type="radio" value="inc" /> D) 4
  <input name="test" type="radio" value="inc" /> E) 5
</form>
<br />
<div class="exp"> a is right </div>
<div class="red"> a is the correct answer</div> 

<form class="q">
  <h4>1. question 2 </h4>
  <input name="test" type="radio" value="inc" /> A) 1
  <input name="test" type="radio" value="ans"/> B) 2
  <input name="test" type="radio" value="inc" /> C) 3
  <input name="test" type="radio" value="inc" /> D) 4
  <input name="test" type="radio" value="inc" /> E) 5
</form>
<br />
<div class="exp"> d is right </div>
<div class="red"> d is the correct answer</div> 

jQuery -

$(function () {
$('input[name="test"]').on('click', function() {
    if ($(this).val() == 'ans') {
        $('.exp').show();
        $('.red').hide();
    } else {
        $('.exp').hide();
        $('.red').show();
    }
})
});

I have it setup so that when the user selects the correct or incorrect answer, a message will popup.

My problem is that when the user clicks an answer in the first question whether it be correct or incorrect, it displays a message for both questions instead of just the single question. I was wonder how I could make it work for each question instead of all of them at once.

Answer 1

Try this:

<div class="exp answer-text" style="display:none"> d is right </div>
<div class="red answer-text" style="display:none"> d is the correct answer</div> 


$(function () {
$('input[name="test"]').on('click', function() {
    $(".answer-text").hide();
    if ($(this).val() == 'ans') {
        $('.exp').show();
    } else {
        $('.red').show();
    }
})
});

Answer 2

You can use jQuery method chaining to select the first next div to the parent. :

el.parents('.q').nextAll('.exp').first();

Example Snippet:

 $(function() { $('.exp').hide(); $('.red').hide(); $('input[name="test"]').on('click', function() { var el = $(this); if (el.val() == 'ans') { el.parents('.q').nextAll('.exp').first().show(); el.parents('.q').nextAll('.red').first().hide(); $('.red').hide(); } else { el.parents('.q').nextAll('.red').first().show(); el.parents('.q').nextAll('.exp').first().hide(); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="q"> <h4>1. question 1 </h4> <input name="test" type="radio" value="inc" />A) 1 <input name="test" type="radio" value="ans" />B) 2 <input name="test" type="radio" value="inc" />C) 3 <input name="test" type="radio" value="inc" />D) 4 <input name="test" type="radio" value="inc" />E) 5 </form> <br /> <div class="exp">a is right</div> <div class="red">a is the correct answer</div> <form class="q"> <h4>1. question 2 </h4> <input name="test" type="radio" value="inc" />A) 1 <input name="test" type="radio" value="ans" />B) 2 <input name="test" type="radio" value="inc" />C) 3 <input name="test" type="radio" value="inc" />D) 4 <input name="test" type="radio" value="inc" />E) 5 </form> <br /> <div class="exp">d is right</div> <div class="red">d is the correct answer</div>