每個元素的jquery觸發函數

Question

因此，我有一個帶有一些內容的小表，它可以通過點擊一個按鈕來擴展顯示帶有額外內容的容器div。

我想綁定一個函數到這個動作，但是當我這樣做時，函數似乎會被每個錶行數引發一次。

的jsfiddle：

https://jsfiddle.net/jtby9c12/

表：

<button id="toggle-descriptions-button">+</button> 

<table> 
    <tbody> 
    <tr> 
     <th class="table-header-1">Download</th> 
     <th class="table-header-2">Size</th> 
     <th class="table-header-3">Notes</th> 
    </tr> 
    <tr> 
     <td class="column-1">Item 
      <div class="div-container" style="display: block;"> 
       <div class="div-gallery"> 
        <img src="#"> 
        <br style="clear: both"> 
       </div> 
       <div class="div-description">Description Text</div> 
      </div> 
     </td> 
     <td class="column-2">1.2MB</td> 
     <td class="column-3">Note</td> 
    </tr> 
    </tbody> 
</table> 

*實際表包含22行和說明，這只是示出了結構的樣品。

的Jquery：

var descriptions = $(".div-container") 
var descButton = $("#toggle-descriptions-button") 

descButton.click(function(){ 
    console.log("Button Clicked!") 
    descriptions.toggle(400, function() { 
     console.log("I'm a fucntion!") 
    }); 
}); 

正如你可以看到，它調用函數22次，我試圖讓它只調用一次。

我期待得到一個回調的功能，它是所有描述一個狀態的改變，我只需要一個回報。

Answer 1

要達到此目的，您可以使用從toggle()返回的調用。附上done()事件處理程序，畢竟承諾都得到了解決，這將火：

var $descriptions = $(".div-container") 
 
var $descButton = $("#toggle-descriptions-button") 
 

 
$descButton.click(function() { 
 
    console.log("Button Clicked!") 
 
    $descriptions.toggle(400).promise().done(function() { 
 
    console.log("I'm a function!") 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="toggle-descriptions-button">+</button> 
 

 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <th class="table-header-1">Download</th> 
 
     <th class="table-header-2">Size</th> 
 
     <th class="table-header-3">Notes</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="column-1">Item 
 
     <div class="div-container" style="display: none;"> 
 
      <div class="div-gallery"> 
 
      <img src="#"> 
 
      <br style="clear: both"> 
 
      </div> 
 
      <div class="div-description">Description Text</div> 
 
     </div> 
 
     </td> 
 
     <td class="column-2">1.2MB</td> 
 
     <td class="column-3">Note</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="column-1">Item 
 
     <div class="div-container" style="display: none;"> 
 
      <div class="div-gallery"> 
 
      <img src="#"> 
 
      <br style="clear: both"> 
 
      </div> 
 
      <div class="div-description">Description Text</div> 
 
     </div> 
 
     </td> 
 
     <td class="column-2">1.2MB</td> 
 
     <td class="column-3">Note</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="column-1">Item 
 
     <div class="div-container" style="display: none;"> 
 
      <div class="div-gallery"> 
 
      <img src="#"> 
 
      <br style="clear: both"> 
 
      </div> 
 
      <div class="div-description">Description Text</div> 
 
     </div> 
 
     </td> 
 
     <td class="column-2">1.2MB</td> 
 
     <td class="column-3">Note</td> 
 
    </tr> 
 
    </tbody> 
 
</table>