javascript - 循环中的按钮，单击仅触发第一个按钮

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

警报总是给我第一，无论我点击哪个按钮，有什么要点可以查找问题吗？当我尝试了几乎所有方法时，我不知道在哪里继续寻找。

Answer 1

您需要找到与单击的 save_img 最接近的 tr，因为您需要知道哪个是单击的元素。点击处理程序中的 this 引用句柄所定位的元素(此处的 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);
}