如何使用單個JS事件更新多個TD標簽的內容？

Question

我有一個值表。 我在其中一些上放了一個特殊的class ，向我表明，當我按下按鈕時，所有具有class <td>標簽都會更新為預定值。

以下是我的無效代碼。 我的想法是，當我按下按鈕時，所有具有class="order"標簽都會用字符串更新，即“ Order Updated”

對於背景，我可以使用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> 

Answer 2

您可以使用這種$("#mainTable td.order").html("Order Updated")方法，而不要使用每種方法。

 $("#button").on("click",function() { $("#mainTable td.order").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>