我需要jQuery切換事件的解決方案。

Question

在此html上添加切換事件，這裏是的html代碼。我需要更多的行切換事件。但其唯一的作品爲第一個，當我添加更多，但它不適用於第二和第三個。

<div class="faq_description"> 
        <div class="faqs_text"> 
         <h3 id="click_question">simply dummy text of the printing and typesetting ?</h3> 
         <p id="toggle_text">the industry's standard dummy text ever since the 1500s, when an unknown 
           printer took a galley of type and scrambled it to make a type specimen book. 
           It has survived not only five centuries, but also the leapthe industry's standard dummy text ever since the 1500s, when an unknown 
           printer took a galley of type and scrambled it to make a type specimen book. 
           It has survived not only five centuries, but also the leap</p> 
        </div> 
        <div class="faqs_text"> 
         <h3 id="click_question">simply dummy text of the printing and typesetting ?</h3> 
         <p id="toggle_text">the industry's standard dummy text ever since the 1500s, when an unknown 
           printer took a galley of type and scrambled it to make a type specimen book. 
           It has survived not only five centuries, but also the leapthe industry's standard dummy text ever since the 1500s, when an unknown 
           printer took a galley of type and scrambled it to make a type specimen book. 
           It has survived not only five centuries, but also the leap</p> 
        </div> 
       </div> 

JavaScript代碼這個HTML：

$(document).ready(function(){ 
$("#click_question").click(function(){ 
    $("#toggle_text").toggle(1000); 
}); 

}）;

Answer 1

這裏是您的解決方案，改變id到class

$(document).ready(function(){ 
 
    $(".click_question").click(function(){ 
 
     $(this).closest(".faqs_text").find('.toggle_text').toggle(1000); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="faq_description"> 
 
         <div class="faqs_text"> 
 
          <h3 class="click_question">simply dummy text of the printing and typesetting ?</h3> 
 
          <p class="toggle_text">the industry's standard dummy text ever since the 1500s, when an unknown 
 
            printer took a galley of type and scrambled it to make a type specimen book. 
 
            It has survived not only five centuries, but also the leapthe industry's standard dummy text ever since the 1500s, when an unknown 
 
            printer took a galley of type and scrambled it to make a type specimen book. 
 
            It has survived not only five centuries, but also the leap</p> 
 
         </div> 
 
         <div class="faqs_text"> 
 
          <h3 class="click_question">simply dummy text of the printing and typesetting ?</h3> 
 
          <p class="toggle_text">the industry's standard dummy text ever since the 1500s, when an unknown 
 
            printer took a galley of type and scrambled it to make a type specimen book. 
 
            It has survived not only five centuries, but also the leapthe industry's standard dummy text ever since the 1500s, when an unknown 
 
            printer took a galley of type and scrambled it to make a type specimen book. 
 
            It has survived not only five centuries, but also the leap</p> 
 
         </div> 
 
        </div>

希望這個解決方案將幫助你。

Answer 2

你需要使用類而不是ID來做你想做的事。下面是使用你的HTML的例子：

<div class="faq_description"> 
    <div class="faqs_text"> 
    <h3 id="click_question" class="this-question">heading 1</h3> 
    <p id="toggle_text" class="this-text">the text 1</p> 
    </div> 
    <div class="faqs_text"> 
    <h3 id="click_question" class="this-question">heading 2</h3> 
    <p id="toggle_text" class="this-text">the text 2</p> 
    </div> 
</div>` 

這裏是jQuery的，以適應變化：

$(document).ready(function() { 
    $(".this-question").click(function() { 
    $(this).parent().find("p.this-text").toggle(1000); 
    }); 
    $(".this-text").click(function() { 
    $(this).toggle(1000); 
    }) 
}); 

第一個主要區別是類而不是ID的包容和使用。 ID對您所需要的內容太具體。下一個重大變化是使用$(this).parent().find("p.this-text").toggle(1000);而不是$("#toggle_text").toggle(1000);。使用parent（）獲取'faqs_text'div，然後可以使用它來查找它的子節點'p.this-text'，然後將切換應用於它。

作爲獎勵，我還添加了一點額外的代碼，以便可以單擊文本內容或標題來隱藏文本。

這是一個工作pen。

注：我沒有更正您的ID。 ID應始終是唯一的。例如，您可以擁有一個名爲「toggle_text_1」的ID和另一個名爲「toggle_text_2」的ID。爲了實現這個jQuery練習所要達到的目的，這些ID根本就不是必需的。

Answer 3

更改ID的上課，並進行以下修改您的jQuery代碼

$('.faq_description .toggle_text').hide(); 
 

 
$('.faq_description .click_question').click(function(e){ 
 
    
 
    e.preventDefault(); 
 
    // hide all span 
 
    var $this = $(this).parent().find('.toggle_text'); 
 
    $(".faq_description .toggle_text").not($this).hide(); 
 
    
 
    
 
    $this.slideToggle(); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="faq_description"> 
 
        <div class="faqs_text"> 
 
         <h3 class="click_question">simply dummy text of the printing and typesetting ?</h3> 
 
         <p class="toggle_text">the industry's standard dummy text ever since the 1500s, when an unknown 
 
           printer took a galley of type and scrambled it to make a type specimen book. 
 
           It has survived not only five centuries, but also the leapthe industry's standard dummy text ever since the 1500s, when an unknown 
 
           printer took a galley of type and scrambled it to make a type specimen book. 
 
           It has survived not only five centuries, but also the leap</p> 
 
        </div> 
 
        <div class="faqs_text"> 
 
         <h3 class="click_question">simply dummy text of the printing and typesetting ?</h3> 
 
         <p class="toggle_text">the industry's standard dummy text ever since the 1500s, when an unknown 
 
           printer took a galley of type and scrambled it to make a type specimen book. 
 
           It has survived not only five centuries, but also the leapthe industry's standard dummy text ever since the 1500s, when an unknown 
 
           printer took a galley of type and scrambled it to make a type specimen book. 
 
           It has survived not only five centuries, but also the leap</p> 
 
        </div> 
 
       </div>

說明：

1.var $此= $（本）.parent（ ）.find（ 'toggle_text。'）;
當你點擊一個問題時，該問題的toggle_text存儲在'this'變量中。
2. $（「。faq_description .toggle_text」）。not（$ this）.hide（）;
現在將'this'變量與您代碼中存在的所有其他toggle_text進行比較，並將它們隱藏起來。
3. $ this.slideToggle（）;
現在'this'變量被切換（在這裏你可以使用slideToggle（）或者toggle（），但是slideToggle（）會增加一些很好的效果。）