Jquery Brennfunktion einmal pro Element

Question

Also habe ich eine kleine Tabelle mit etwas Inhalt, die mit einem Klick auf eine Schaltfläche erweitert werden kann, um ein Container-Div mit extra Inhalt anzuzeigen.

Ich versuche eine Funktion an diese Aktion zu binden, aber wenn ich das tue, scheint die Funktion einmal pro Anzahl der Tabellenzeile ausgelöst zu werden.

JSFiddle:

https://jsfiddle.net/jtby9c12/

Tabelle:

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

* Die tatsächliche Tabelle enthält 22 Zeilen und Beschreibungen, dies zeigt nur die Strukturprobe.

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!") 
    }); 
}); 

Wie Sie sehen können, es ruft die Funktion 22 Mal, und ich versuche, es zu bekommen nur einmal anzurufen.

Ich suche einen einzigen Rückruf für die Funktion zu bekommen, dann ist es eine Zustandsänderung für alle Beschreibungen, ich brauche nur eine Rückkehr.

Answer 1

Um dies zu erreichen, können Sie die von zurückgegebenen promise() Anrufe verwenden. Bringen Sie ein done() Ereignishandler es, das Feuer wird, nachdem alle Versprechungen wurden gelöst:

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>