制作一个简单的多项选择测验 HTML/JQUERY

Question

我目前正在为自己做一个基本的复习测试，它看起来像这样：

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();
    }
})
});

我已经设置好了，当用户选择正确或错误的答案时，会弹出一条消息。

我的问题是，当用户单击第一个问题中的答案时，无论它是正确还是错误，它都会显示两个问题的消息，而不仅仅是单个问题。我想知道如何使它适用于每个问题，而不是一次解决所有问题。

Answer 1

试试这个：

<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

您可以使用 jQuery 方法链接来选择父级的第一个下一个 div。 ：

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

示例代码段：

$(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>