javascript - 如何使用单个 JS 事件更新多个 TD 标签的内容？

Question

我有一个包含值的表。我放了一个特别class在其中一些上，向我表明当我按下一个按钮时，所有<td>具有 class 的标签用预定值更新。

下面是我的非工作代码。这个想法是当我按下按钮时，所有具有 class="order" 的标签用字符串更新，即“订单已更新”

对于背景，我可以使用 id 来完成，因为当我只有一个单元格要更新时，但现在我需要一次更新多个单元格。

$("#button").click(function() {
  $("#mainTable").find("td").each(function() {
    this.html("Order Updated");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="mainTable">
  <tr>
    <td class="order">-</td>
  </tr>
  <tr>
    <td>-</td>
  </tr>
  <tr>
    <td class="order">-</td>
  </tr>
  <tr>
    <td class="order">-</td>
  </tr>
</table>
<button id="button">Click to update Order</button>

注意:代码无效。

Answer 1

你的选择器是错误的，它应该是 $(this) 那么只需将特殊类添加到你的 find()

$("#button").click(function() {
  $("#mainTable").find("td.order").each(function() {
   $(this).html("Order Updated");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="mainTable">
  <tr>
    <td class="order">-</td>
  </tr>
  <tr>
    <td>-</td>
  </tr>
  <tr>
    <td class="order">-</td>
  </tr>
  <tr>
    <td class="order">-</td>
  </tr>
</table>
<button id="button">Click to update Order</button>