每个元素一次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

要实现此目的，您可以使用promise()来电中返回的toggle()。附加一个done()事件处理程序，它将在所有承诺解决后触发：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;