如何在jQuery中创建一个show / hide循环？

时间：2017-08-18 09:44:34

标签： javascript jquery

这是我的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>

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

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添加更多Q和A而无需添加更多jQuery？

非常感谢！

5 个答案:

答案 0 :(得分：6)

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

为了达到你所需要的，你可以在问题和答案上使用通用的类，然后通过它们的索引将两者联系在一起，如下所示：

"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>

答案 1 :(得分：1)

  1. 使用带有答案ID的data属性。
  2. 使用jQuery(".all-questions").click
    3. 一次将eventListener添加到所有问题中
  3. 使用jQuery('.answer'+jQuery(this).data('answer')).show();显示当前答案。 this将使用当前元素。
  4. 使用jQuery(this).addClass("highlighted");将类添加到当前元素
  5. 要添加幻灯片编号，请使用slideNumber = jQuery(this).data('answer');

    6. ＆＃13;
    ＆＃13; 
    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(".all-questions").click(function() {
    jQuery(".all-answers").hide();
    jQuery('.answer'+jQuery(this).data('answer')).show();
    jQuery(".all-questions").removeClass("highlighted");
    jQuery(this).addClass("highlighted");
    slideNumber = jQuery(this).data('answer');
  });
});
    ＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq-carousel">
  <div data-answer="1" class="all-questions question1">
    <h4>Question 1</h4>
  </div>
  <div data-answer="2" class="all-questions question2">
    <h4>Question 2</h4>
  </div>
  <div data-answer="3" 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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 2 :(得分：0)

使用正确的数字为所有问题和答案元素提供数据编号属性，然后使用

$(".all-questions").click(function() {
    $(".all-questions").hide();
    var slideNumber = $(this).data("number");
    $(".answer"+slideNumber).show();
    $(".all-questions").removeClass("highlighted");
    $(this).addClass("highlighted");
}

答案 3 :(得分：0)

如果不对HTML进行任何更改，则应执行以下操作：

jQuery(function ($) {
    "use strict";
    $('.all-questions').on('click', function() {
        $('.all-answers').hide().filter('.answer' + $(this).index()).show();
        $('.all-questions').removeClass('highlighted').filter(this).addClass('highlighted');

    });

    $(".question1").trigger('click');
});

答案 4 :(得分：0)

试试这个。非常简单。我使用的技巧是将每个问题类名与它的答案类名相关联。例如，如果问题1类名是question1，则其答案类名称为question1_answer。在那之后让魔法发生（你可以随意添加你的风格。只需复制/粘贴并运行该代码，看看它的作用。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script>

        function myFunction(classname){

            var answerClassName = "." + classname + '_answer';
            $(answerClassName).show();

            //Hide all other answers
            var otherAnswers = document.body.getElementsByTagName("div");
            var l = otherAnswers.length;

            for(i=0 ; i<l ;i++){

                if(otherAnswers[i].className == classname){
                    //do nothing
                }else{
                    var otherAnswersClassName = "." + otherAnswers[i].className + '_answer';
                    jQuery(otherAnswersClassName).hide();
                }
            }
        }

        </script>

    </head>

    <body>
        <div class="question1" onclick="myFunction(this.className)">
            <h4>Question 1</h4>
        </div>

        <div class="question1_answer">
            <p>Answer 1</p>
        </div> 

        <div class="question2" onclick="myFunction(this.className)">
            <h4>Question 2</h4>
        </div>

        <div class="question2_answer">
            <p>Answer 2</p>
        </div> 
    </body>

</html>
相关问题
最新问题