javascript - 如何在 jQuery 中创建显示/隐藏循环？

Question

这是我的 HTML，包含 3 个问题和 3 个答案:

<div class="faq-carousel">
<div class="all-questions question1">
    <h4>Question 1</h4>
</div>
<div class="all-questions question2">
    <h4>Question 2</h4>
</div>
<div class="all-questions question3">
    <h4>Question 3</h4>
</div>

<div class=" all-answers answer1">
    <p>Answer 1</p>
</div>              
<div class=" all-answers answer2">
    <p>Answer 2</p>
</div>  
<div class=" all-answers answer3">
    <p>Answer 3</p>
</div>

这是显示/隐藏 3 个问题和答案的 jQuery:

jQuery(document).ready(function () {

"use strict";

jQuery(".all-answers").hide();
jQuery(".answer1").show();
jQuery(".all-questions").removeClass("highlighted");
jQuery(".question1").addClass("highlighted");

var slideNumber = 1;
jQuery(".question1").click(function () {
    jQuery(".all-answers").hide();
    jQuery(".answer1").show();
    jQuery(".all-questions").removeClass("highlighted");
    jQuery(".question1").addClass("highlighted");
    slideNumber = 1;
});

jQuery(".question2").click(function () {
    jQuery(".all-answers").hide();
    jQuery(".answer2").show();
    jQuery(".all-questions").removeClass("highlighted");
    jQuery(".question2").addClass("highlighted");
    slideNumber = 2;
});

jQuery(".question3").click(function () {
    jQuery(".all-answers").hide();
    jQuery(".answer3").show();
    jQuery(".all-questions").removeClass("highlighted");
    jQuery(".question3").addClass("highlighted");
    slideNumber = 3;
}); });

我如何更改 jQuery，以便我可以在 HMTL 中添加更多的问答，而无需添加更多的 jQuery？

非常感谢!

Answer 1

您在此尝试实现的过程是“干燥”您的代码，换句话说，不要重复自己。

要实现您的需要，您可以在问题和答案上使用通用类，然后通过它们的索引将两者关联起来，如下所示:

"use strict";

jQuery(document).ready(function($) {
  $('.question').click(function() {
    $('.question').removeClass('highlighted');
    var index = $(this).addClass('highlighted').index();
    $('.answer').hide().eq(index).show();
  });
});

.answer { display: block; }
.answer ~ .answer { display: none; }
.highlighted { background-color: #CC0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-carousel">
  <div class="question">
    <h4>Question 1</h4>
  </div>
  <div class="question">
    <h4>Question 2</h4>
  </div>
  <div class="question">
    <h4>Question 3</h4>
  </div>

  <div class="answer">
    <p>Answer 1</p>
  </div>
  <div class="answer">
    <p>Answer 2</p>
  </div>
  <div class="answer">
    <p>Answer 3</p>
  </div>
</div>

或者，如果您想明确地将元素链接在一起，例如由于 HTML 结构限制，那么您可以使用 data 属性来指定元素之间的关系:

"use strict";

jQuery(document).ready(function($) {
  $('.question').click(function() {
    $('.question').removeClass('highlighted');
    var target = $(this).addClass('highlighted').data('target');
    $('.answer').hide().filter(target).show();
  });
});

.answer { display: block; }
.answer ~ .answer { display: none; }
.highlighted { background-color: #CC0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-carousel">
  <div class="question" data-target="#answer-01">
    <h4>Question 1</h4>
  </div>
  <div class="question" data-target="#answer-02">
    <h4>Question 2</h4>
  </div>
  <div class="question" data-target="#answer-03">
    <h4>Question 3</h4>
  </div>

  <div class="answer" id="answer-01">
    <p>Answer 1</p>
  </div>
  <div class="answer" id="answer-02">
    <p>Answer 2</p>
  </div>
  <div class="answer" id="answer-03">
    <p>Answer 3</p>
  </div>
 </div>