Question

我想用JavaScript创建一个动态的网页我有10个问题，显示类型设置为“无”，期望第一个/实际问题displaytype是“block”。每个问题都是肯定的 - 没问题。响应用户选择查看下一个问题是相关的我知道如何构建这个静态但我想要一个动态的解决方案来解决这个问题有人可以帮忙吗？这是我的问题的架构

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>10 Questions</title>
  <script>
  ...
  </script>
</head>
<body>
  <header>A Dynamic Questionaire.</header>
    <section>
      <article>
        <hgroup>
          <h1>Questionaire</h1>
          <h2>Anwer the questions in order as they appear.</h2>
        </hgroup>
        <div id="Question1" style="display:block;">
          1. 
          <button type="button" id="btnYes1">Yes</button>
          <button type="button" id="btnNo1">No</button>
        </div>
        <div id="Question2" style="display:none;">
          2. 
          <button type="button" id="btnYes2">Yes</button>
          <button type="button" id="btnNo2">No</button>
        </div>
        <div id="Question3" style="display:none;">
          3. 
          <button type="button" id="btnYes3">Yes</button>
          <button type="button" id="btnNo3">No</button>
        </div>
        <div id="Question4" style="display:none;">
          4. 
          <button type="button" id="btnYes4">Yes</button>
          <button type="button" id="btnNo4">No</button>
        </div>
        <div id="Question5" style="display:none;">
          5. 
          <button type="button" id="btnYes5">Yes</button>
          <button type="button" id="btnNo5">No</button>
        </div>
        <div id="Question5" style="display:none;">
          6. 
          <button type="button" id="btnYes6">Yes</button>
          <button type="button" id="btnNo6">No</button>
        </div>
        <div id="Question5" style="display:none;">
          7. 
          <button type="button" id="btnYes7">Yes</button>
          <button type="button" id="btnNo7">No</button>
        </div>
        <div id="Question5" style="display:none;">
          8. 
          <button type="button" id="btnYes8">Yes</button>
          <button type="button" id="btnNo8">No</button>
        </div>
        <div id="Question5" style="display:none;">
          9. 
          <button type="button" id="btnYes9">Yes</button>
          <button type="button" id="btnNo9">No</button>
        </div>
        <div id="Question5" style="display:none;">
          10. 
          <button type="button" id="btnYes10">Yes</button>
          <button type="button" id="btnNo10">No</button>
        </div>
      </article>
    </section>
  </body>
</html>

Answer 1

有很多方法可以做到这一点。一种快速的方法是在按钮中放置一些信息，指示下一步用户的位置。所以我在这里添加了一个data-next值，每个按钮与下一个要显示的面板的id相匹配，我在CSS中切换一个类来显示/隐藏面板。

＆＃13;

var buttons = document.getElementsByTagName('button'),
  questions = document.getElementsByTagName('div');
for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  button.addEventListener('click', function() {
    var target = this.getAttribute('data-next');
    for (var j = 0; j < questions.length; j++) {
      var question = questions[j];
      if (question.id == target) {
        question.classList.add('show');
      } else if (question.classList.contains('show')) {
        question.classList.remove('show');
      }
    }
  });
}

＆＃13;

div {
  display: none;
}
.show {
  display: block;
}

＆＃13;

<div id="Question1" class="show">
  1.
  <button type="button" data-next="Question2">Yes</button>
  <button type="button" data-next="Question3">No</button>

</div>
<div id="Question2">
  2.
  <button type="button" data-next="Question4">Yes</button>
  <button type="button" data-next="Question5">No</button>
</div>
<div id="Question3">
  3.
  <button type="button" data-next="Question6">Yes</button>
  <button type="button" data-next="Question6">No</button>
</div>
<div id="Question4">
  4.
  <button type="button" data-next="Question10">Yes</button>
  <button type="button" data-next="Question10">No</button>
</div>
<div id="Question5">
  5.
  <button type="button" data-next="Question10">Yes</button>
  <button type="button" data-next="Question10">No</button>
</div>
<div id="Question6">
  6.
  <button type="button" data-next="Question7">Yes</button>
  <button type="button" data-next="Question8">No</button>
</div>
<div id="Question7">
  7.
  <button type="button" data-next="Question9">Yes</button>
  <button type="button" data-next="Question9">No</button>
</div>
<div id="Question8">
  8.
  <button type="button" data-next="Question9">Yes</button>
  <button type="button" data-next="Question9">No</button>
</div>
<div id="Question9">
  9.
  <button type="button" data-next="Question10">Yes</button>
  <button type="button" data-next="Question10">No</button>
</div>
<div id="Question10">
  10.
</div>

＆＃13;

使用Javascript进行动态调查

1 个答案: