Question

我正在进行一项测验，其中有六个问题（没有正确或错误的答案）。

除第一个问题外，问题隐藏在HTML中。测验底部有一个“下一步”按钮。当人们在回答每个问题后单击“下一步”时，我希望它找到可见的问题，隐藏它然后显示下一个问题。

我在做这件事时遇到了麻烦。我知道我可以隐藏所有元素或显示所有元素，但我想只显示隐藏的下一个问题。例如，在页面加载时，问题1是可见的。当用户点击下一个时，应隐藏问题1并显示问题2。其余问题应该隐藏起来。再次单击下一个按钮时，将隐藏问题2并显示问题3，依此类推。我似乎无法弄清楚这一点。我尝试使用jquery每个函数，并以某种方式通过索引来定位问题，但它不起作用。

这是我的JS小提琴：http://jsfiddle.net/amykirst/st5639ud/

HTML：

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

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

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

  <form>
    <select class="demo">
      <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="question hide">
  <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="question hide">
  <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="question hide">
  <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="question hide">
  <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="question hide">
  <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 -->

<div>
    <form name="next">
        <input type="button" class="next" value="Next"/>
    </form>
</div>

CSS：

.hide {
display:none;

}

Answer 1

像这样：

var pos = 0;
$(".next").click(function () {
    pos++
    $(".question").hide();
    $(".question").eq(pos).show();

});

您需要问题标题＆＃34;问题1 of 5＆＃34;在你的问题包装内。

Answer 2

你需要删除你的循环，这使得它做了很多次，所有你需要做的就是获得它可见的问题的引用并隐藏它，然后使用next（）获取引用下一个问题。

http://jsfiddle.net/st5639ud/10/

$(".next").click(function () {       
    $(".question:visible").hide().next(".question").removeClass("hide");
});

或者您可以添加“隐藏”类

，而不是使用hide（）

http://jsfiddle.net/st5639ud/12/

$(".question:visible").addClass('hide').next(".question").removeClass("hide");

如何根据索引号在DOM中显示或隐藏HTML元素

2 个答案: