我需要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（）会增加一些很好的效果。）