按鈕處於循環中，單擊僅觸發第一個按鈕

Question

我做了一個循環，根據我得到的顏色數量放了幾個按鈕，但是無論我單擊哪個按鈕，它都像我單擊第一個按鈕一樣，按鈕是唯一的，我將它們設置為id。

html-循環

<td> <div> Add 2nd color </div> </td>
                    <td style="min-width:121px;position:relative;">
                    '.$pop['pop3'].'
                        <div id= "'.$i.'" class="btn save_img">  Choose image </div>

js：

$('.save_img').click(function(){

        onChooseImageClick();
    });

    function onChooseImageClick()
    {
        var rowId = $('.save_img').closest('tr').attr('row_id');
        alert(rowId);

警報始終為我提供數字1，無論我單擊什么按鈕，是否有任何要查找問題的地方？ 當我嘗試了幾乎所有東西時，我不知道在哪里繼續尋找。

Answer 1

您需要找到被單擊的save_img的最接近的tr ，因為您需要知道哪個是被單擊的元素。 點擊處理程序中的this引用了handle所save_img元素（此處的save_img元素），因此將其傳遞給onChooseImageClick然后使用該元素引用來查找tr元素

$('.save_img').click(function () {

    onChooseImageClick(this);
});

function onChooseImageClick(el) {
    var rowId = $(el).closest('tr').attr('row_id');
    alert(rowId);
}

$('.save_img').closest('tr')將返回所有具有.save_img元素的tr元素，然后.attr('row_id')將返回該集合中第一個元素的id 。

---

正如@John建議的那樣，您也可以使用

$('.save_img').click(onChooseImageClick);

function onChooseImageClick(el) {
    var rowId = $(this).closest('tr').attr('row_id');
    alert(rowId);
}