Jquery 每个元素触发一次函数

Question

所以，我有一个包含一些内容的小 table，单击按钮可以将其展开以显示包含额外内容的容器 div。

我试图将一个函数与此操作相关联，但是当我这样做时，该函数似乎每 table 行被触发一次。

JSFiddle:

Table:

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

*实际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 次，而我试图让它只调用一次。

我正在寻找函数的单个回调，它是所有描述的一个状态更改，我只需要一个 return。

Answer 1

为此，您可以使用从 toggle() 调用返回的 promise()。将一个 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>

Jquery 每个元素触发一次函数

Jquery firing function once per element

javascript

jquery

function

toggle