如何在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> 

這裏是我的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，以便我可以添加更多的Q和A到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>

Answer 2

1. 使用data屬性與解答ID。
2. 使用jQuery(".all-questions").click
3. 使用jQuery('.answer'+jQuery(this).data('answer')).show();來一次性添加eventListener到所有問題以顯示當前答案。 this將使用當前元素。
4. 使用jQuery(this).addClass("highlighted");的類添加到當前元素
5. 要添加幻燈片編號，使用slideNumber = jQuery(this).data('answer');

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'); 
 
    }); 
 
});

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

Answer 3

給所有的問題和回答的元素與數據編號屬性正確的號碼然後使用

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

Answer 4

由於沒有更改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'); 
}); 

Answer 5

試試這一個。很簡單。我使用的技巧是將每個問題類名稱與它的答案類名稱關聯起來。例如，如果問題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>