如何用一個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>

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>