jQuery - 用于在页面上显示下一个元素并在单击时隐藏当前元素的功能

时间：2016-09-06 16:00:24

标签： javascript jquery html css

我一直在尝试创建一个功能，一旦选中单选按钮，就会检查ID是否正确，然后在另一个div中显示后续按钮（不是下一个按钮）。

单击后续按钮后，它将隐藏前一个div并显示当前内容的其余内容。

我正在尝试创建一个脚本来为我想要的许多容器执行此操作。因此，您可以基本上遍历显示和隐藏元素的页面，点击并根据答案进行检查。

然而，我无法弄清楚如何在第一次实例之后实现这一点。任何帮助将非常感激。这是我的代码：

＆＃13;
＆＃13; 
$(document).ready(function () {
  $(this).find(".check-answer-button").click(function () {
    if ($("#correct-answer").is(":checked")) {
      if ($(".wrong-answer").is(":visible")) {
        $(".wrong-answer").hide();
      }
      $(".right-answer").show();
      $(".next-question-div:first").show();
      $(".next-question-button").click(function () {
        $(".question-radio-button-div:first").show(500);
        $(".answer-div:first").show(500);
        $(".question-div:nth-child(1)").hide();
        $(".next-question-button").hide();
        if ($("h4").is(":visible")) {
          $("h4").hide();
        }
      });
    }
    else {
      $(".wrong-answer").show();
    }
  });
});
＆＃13; 
.right-answer,
.wrong-answer {
  display: none;
}

.next-question-div {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- QUESTION 1 -->
<div class="question-div" id="question-one">
  <div class="row">
    <div class="col-12">
      <p>Q1</p>
      <ul>
        <li>
          <input type="radio" name="radio" value="value1" id="correct-answer">A
      </li>
    <li>
      <input type="radio" name="radio" value="value1">B
  </li>
<li>
  <input type="radio" name="radio" value="value1">C
</li>
</ul>
</div>
</div>
<div class="row" id="answer-one-div">
  <div class="col-12">
    <button type="button" class="check-answer-button">Check Answer</button>
    <h4 class="right-answer">Well done this is correct</h4>
    <h4 class="wrong-answer">Sorry, try again</h4> </div>
</div>
</div>
<!-- QUESTION 2 -->
<div class="question-div" id="question-two">
  <div class="next-question-div">
    <button type="button" class="next-question-button">Next Question</button>
  </div>
  <div class="row question-radio-button-div">
    <div class="col-12">
      <p>Q2</p>
      <ul>
        <li>
          <input type="radio" name="radio" value="value1">A
      </li>
    <li>
      <input type="radio" name="radio" value="value1">B
  </li>
<li>
  <input type="radio" name="radio" value="value1" id="correct-answer">C
</li>
</ul>
</div>
</div>
<div class="row answer-div" id="answer-two-div">
  <div class="col-12">
    <button type="button" class="check-answer-button">Check Answer</button>
    <h4 class="right-answer">Well done this is correct</h4>
    <h4 class="wrong-answer">Sorry, try again</h4> </div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

最好的方法是什么？感谢

1 个答案:

答案 0 :(得分：1)

我建议你纠正你的问题-div。这必须是对所有问题都有效的模板，但每个问题都有不同的问题/答案。

避免使用重复的ID并考虑下一个按钮是每个问题的一部分。只有最后一个问题不再有下一个问题。

请考虑使用 answer =“true”等属性来代替使用ID。

尽量避免混用HTML和bootstrap。

您正在寻找的简单演示可能是：

$(document).ready(function (e) {
  $(".next-question-button").on('click', function (e) {
    var cachedDiv = $(this).closest('.question-div');
    cachedDiv.fadeOut(500, function () {
      cachedDiv.nextAll('.question-div:first').fadeIn(500);
    });
  });

  $(".check-answer-button").on('click', function (e) {
    var cachedDiv = $(this).closest('.question-div');
    if (cachedDiv.find(':radio:checked').attr('answer') == 'true') {
      $(this).nextAll(".wrong-answer").hide();
      $(this).nextAll(".right-answer").show();
      cachedDiv.find('.next-question-div').show();
    }
    else {
      $(this).nextAll(".wrong-answer").show();
    }
  });

  $(".question-div:gt(0)").hide();
});
.right-answer,
.wrong-answer {
  display: none;
}

.next-question-div {
  display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- QUESTION 1 -->
<div class="question-div">
    <div class="row">
        <div class="col-12">
            <p>Q1</p>
            <ul>
                <li>
                    <input type="radio" name="radio" value="value1" answer="true">A
                </li>
                <li>
                    <input type="radio" name="radio" value="value1">B
                </li>
                <li>
                    <input type="radio" name="radio" value="value1">C
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <button type="button" class="check-answer-button">Check Answer</button>
            <h4 class="right-answer">Well done this is correct</h4>
            <h4 class="wrong-answer">Sorry, try again</h4></div>
    </div>
    <div class="next-question-div">
        <button type="button" class="next-question-button">Next Question</button>
    </div>
</div>
<!-- QUESTION 2 -->
<div class="question-div">
    <div class="row">
        <div class="col-12">
            <p>Q2</p>
            <ul>
                <li>
                    <input type="radio" name="radio" value="value1">A
                </li>
                <li>
                    <input type="radio" name="radio" value="value1" answer="true">B
                </li>
                <li>
                    <input type="radio" name="radio" value="value1">C
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <button type="button" class="check-answer-button">Check Answer</button>
            <h4 class="right-answer">Well done this is correct</h4>
            <h4 class="wrong-answer">Sorry, try again</h4></div>
    </div>
    <div class="next-question-div">
        <button type="button" class="next-question-button">Next Question</button>
    </div>
</div>
<!-- QUESTION 3 -->
<div class="question-div">
    <div class="row">
        <div class="col-12">
            <p>Q3</p>
            <ul>
                <li>
                    <input type="radio" name="radio" value="value1">A
                </li>
                <li>
                    <input type="radio" name="radio" value="value1">B
                </li>
                <li>
                    <input type="radio" name="radio" value="value1" answer="true">C
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <button type="button" class="check-answer-button">Check Answer</button>
            <h4 class="right-answer">Well done this is correct</h4>
            <h4 class="wrong-answer">Sorry, try again</h4></div>
    </div>
    <div class="next-question-div">
        <button type="button" class="next-question-button">See results</button>
    </div>
</div>
<!-- QUESTION ENDED -->
<div class="question-div">
    <div class="row">
        <div class="col-12">
            <p>FINISH</p>
        </div>
    </div>
</div>

相关问题
最新问题