Question

有问号的下拉列表和答案选择的收音机。问题是1-30，答案是A-E。点击提交（通过post方法将信息发送到外部数据库），一组if-else语句将确定答案是否正确。

此时，文本将出现（来自隐藏的div），并显示答案是否正确/不正确，以及解释。我将有60个隐藏的div（30个说＆＃34;正确，这里是＆＃39;＆＃34; 30个说＆＃34;不正确，这里是解释＆＃34;），以及每次按下提交按钮时都会触发一个。此外，应该有一个＆＃34;再试一次＆＃34;按钮，重置一切。

TL; DR：

根据问题/答案组合显示隐藏的div 点击提交按钮
使用按钮重置所有内容，以便他们可以重试。

这是我的傻瓜：https://jsfiddle.net/astonishedowl/wjrngf5n/

＆＃13;

$('#submit').onclick(function() {
  if ($("#question").val() == "1") {
    if ($("#answer").val() == "A") {
      $('#q1correct').show();
    } else $("#q1incorrect").show();
  } else if ($("#question").val() == "2") {
    if ($("#answer").val() == "B") {
      $('#q1correct').show();
    } else $("#q1incorrect").show();
  } else $("#whoops").show();
});

＆＃13;

<form method="post">
  <select name="question" id="question">
    <option value="select">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <br />
  <input type="radio" name="answer" value="A">A</input>
  <br />
  <input type="radio" name="answer" value="B">B</input>
  <br />
  <input type="radio" name="answer" value="C">C</input>
  <br />
  <input type="radio" name="answer" value="D">D</input>
  <br />
  <input type="radio" name="answer" value="E">E</input>
  <br />
  <input type="submit" value="Submit" id="submit" />
</form>
<div id="q1correct" style="display:none">question 1 correct</div>
<div id="q1incorrect" style="display:none">question 1 incorrect</div>
<div id="whoops" style="display:none">something went wrong</div>

＆＃13;

Answer 1

在Jquery中，它不是onclick，而是点击。您还需要在文档准备就绪时注册click事件

$( document ).ready(function() {
        $('#submit').click(function() {
      if ($("#question").val() == "1") {
        if ($("#answer").val() == "A") {
          $('#q1correct').show();
        } else $("#q1incorrect").show();
      } else if ($("#question").val() == "2") {
        if ($("#answer").val() == "B") {
          $('#q1correct').show();
        } else $("#q1incorrect").show();
      } else $("#whoops").show();
    });
});

https://jsfiddle.net/cnamu5o8/

您还应该删除表单标记以防止重新加载页面。

Answer 2

我把你的结构改了一点，我希望你不介意

$('#submit').click(function() {
    $('.results').show();
    $('.selectedQ').html($('#question').val()); // set value
    $('.selectedA').html($('.answer:checked').val()); // set value
    $('.feedback').html(''); // clear text
    $('#submit').hide();
    if ($("#question").val() == "1") {
        if ($(".answer:checked").val() == "A") {
            $('.feedback').html('This answer is correct.');
        } else $('.feedback').html('This answer is NOT correct.');
    } else if ($("#question").val() == "2") {
        if ($(".answer:checked").val() == "B") {
            $('.feedback').html('This answer is correct.');
        } else $('.feedback').html('This answer is NOT correct.');
    } else $('.feedback').html('Whoops, please make sure you select a question and an answer');
});
$('#reset').click(function() {
	$('#question').val('');
    $('.answer').prop('checked', false);
    $('.results').hide();
    $('#submit').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="question" id="question">
    <option value="select">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<br />
<input type="radio" name="answer" class="answer" value="A">A</input>
<br />
<input type="radio" name="answer" class="answer" value="B">B</input>
<br />
<input type="radio" name="answer" class="answer" value="C">C</input>
<br />
<input type="radio" name="answer" class="answer" value="D">D</input>
<br />
<input type="radio" name="answer" class="answer" value="E">E</input>
<br />
<input type="submit" value="Submit" id="submit" />
<br/><br/>
<div class="results" style="display:none;">
    Selected Question: <span class="selectedQ"></span><br/>
    Selected Answer: <span class="selectedA"></span><br/>
    Result: <span class="feedback"></span><br/><br/>
    <input type="button" value="Reset" id="reset" />
</div>

Javascript为多项选择测验

2 个答案: