javascript - 使用 JavaScript 隐藏和显示测验问题

Question

我正在构建一个测验，询问用户 6 个问题。有些问题将答案选项显示为下拉菜单。其他人使用单选按钮。有些问题还在表单字段下方显示提示。

测验结束时，测验将根据之前的答案将分数相加，并告诉该人是否有心脏病发作的风险。

显示问题及其提示(如果有的话)的最佳方式是什么？将它们保存在 HTML 文件中并使用 JavaScript 隐藏和显示？或者将问题和选项移动到 JS 文件中的数组中 - 在这种情况下，我将如何控制问题生成的表单输入？

还是别的什么？

以下是 HTML 中的问题:

<section class="questions">
    <h2 class="outline">Question</h2>

    <p class="questionNumber">Question 1 of 5</p>

    <div class="questionAge">
      <p class="questionText">What is your age range?</p>

      <form>
        <select>
          <option value="20-34">
            20-34
          </option>

          <option value="35-39">
            35-39
          </option>

          <option value="40-44">
            40-44
          </option>

          <option value="45-49">
            45-49
          </option>

          <option value="50-54">
            50-54
          </option>

          <option value="55-59">
            55-59
          </option>

          <option value="60-64">
            60-64
          </option>

          <option value="65-69">
            65-69
          </option>

          <option value="70-74">
            70-74
          </option>

          <option value="75-79">
            75-79
          </option>
        </select>
      </form>
    </div><!--end questionAge -->

    <div class="questionCholesterol">
      <p class="questionText">What is your total cholesterol?</p>

      <form>
        <select>
          <option value="Less than 160">
            Less than 160
          </option>

          <option value="160-199">
            160-199
          </option>

          <option value="200-239">
            200-239
          </option>

          <option value="240-279">
            240-279
          </option>

          <option value="Greater than 279">
            Greater than 279
          </option>
        </select>
      </form>

      <div class="tip">
        <p>Don't know your total cholesterol? Attend one of our free
        screenings. <a href="http://www.chsbuffalo.org/events" target=
        "_blank">Click here to view upcoming screenings in our events
        calendar.</a></p>
      </div>
    </div><!-- end cholesterol -->

    <div class="questionSmoker">
      <p class="questionText">Are you a smoker?</p>

      <form>
        <input name="smoker" type="radio" value="Yes">Yes<br>
        <input name="smoker" type="radio" value="No">No<br>
      </form>
    </div><!-- end questionSmoker -->

    <div class="questionHDL">
      <p class="questionText">What is your high-density lipoprotein (HDL)
      cholesterol level?</p>

      <form>
        <select>
          <option value="60">
            60
          </option>

          <option value="50-59">
            50-59
          </option>

          <option value="40-49">
            40-49
          </option>

          <option value="Less than 40">
            Less than 40
          </option>
        </select>
      </form>

      <div class="tip">
        <p>HDL cholesterol is also known as “good” cholesterol. If you
        don’t know your HDL level, ask your doctor for a cholesterol
        test.</p>

        <p>Don’t have a doctor? <a href=
        "http://www.chsbuffalo.org/physicians">Click here to find a primary
        care doctor near you.</a></p>
      </div>
    </div><!-- end questionHDL -->

    <div class="questionMed">
      <p class="questionText">Are you on blood pressure medication?</p>

      <form>
        <input name="medication" type="radio" value="Yes">Yes<br>
        <input name="medication" type="radio" value="No">No<br>
      </form>
    </div><!-- end questionMed -->

    <div class="questionSBP">
      <p class="questionText">What is your Systolic Blood Pressure reading
      (first number)?</p>

      <form>
        <select>
          <option value="Less than 120">
            Less than 120
          </option>

          <option value="120-129">
            120-129
          </option>

          <option value="130-139">
            130-139
          </option>

          <option value="140-159">
            140-159
          </option>

          <option value="Greater than 159">
            Greater than 159
          </option>
        </select>
      </form>

      <div class="tip">
        <p>Don't know your blood pressure? Attend one of our free
        screenings. <a href="http://www.chsbuffalo.org/events" target=
        "_blank">Click here to view upcoming screenings in our events
        calendar.</a></p>
      </div>
    </div><!-- end questionSBP -->

    <form name="next">
      <input type="submit" value="Next">
    </form>
  </section><!-- end questions -->

Answer 1

这是一个非常基本的方法

jquery:

$(":input").change(function(){
    $(this).parents("div").addClass("hideMe");
    $(this).parents("div").next("div").removeClass("hideMe");
});

为了完成这项工作，我创建了一个名为 class 的新 "hideMe"，除第一个问题之外的所有问题都必须从该问题开始，但当选择/回答上面的 function 时，就会将该 class 添加到当前问题中select/input 的父级 div，并从下一个包含问题的 class 中删除所述 div

这里的JSFIDDLE展示了它的工作原理

希望这对您有所帮助并让您走上正轨