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>

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

2 个答案: