javascript - 当 $(this) 单击时，在每个 tr 中单独执行 onclick 函数？

Question

我想在单击 tr 中的每个项目时执行相同的代码。所有 tr 元素中的项目都是相同的。所以问题是，脚本没有发现任何遗漏，并执行使用此 id 找到的第一个元素

这是我需要时的 HTML 代码:

<tbody id="bList">
<tr class="">
    <td class="center" style="display:none;"></td>
    <td></td>
    <td class="center"></td>
    <td class="center"></td>
    <td class="center" style="width:200px !important;">
        <span id="timer" class="countdown callback ended" onclick="return false;"
              data-inc="0" data-time="10" data-id="btc2" rel="nofollow"></span>
        <span id="starter" class="" active="yes"> > </span>
    </td>
    <td class="center">
        <span id="open" class="">Open</span>
    </td>
    <td class="center"></td>
    <td class="center"></td>
</tr>
<tr class="selected">
    <td class="center" style="display:none;"></td>
    <td></td>
    <td class="center"></td>
    <td class="center"></td>
    <td class="center" style="width:200px !important;">
        <span id="timer" class="countdown callback ended" onclick="return false;"
             data-inc="0" data-time="10" data-id="btc1" rel="nofollow"></span>
            <span id="starter" class="" active="no"> > </span>
        </td>
        <td class="center">
            <span id="open" class=""> Open </span>
        </td>
        <td class="center"></td>
        <td class="center"></td>
    </tr>
    </tbody>

要在单击时将选定的类添加到 tr，我将 .siblings() 函数与 jquery 结合使用。但我尝试用它执行相同的想要的操作，但我没有弄清楚。

这是我尝试过的脚本:

$('#open').click(function(){
    /*$(this).parent().parent().find('td:nth-child(5) #starter')
             .html('Start Timer! >');*/
    if($(this).parent().parent().find('#timer').hasClass('ended'))
    {
        $(this).parent().parent().find('#starter').html('Start Timer!  >')
               .attr({'active':'yes'});
    }else{
         //You can ignore this part. It does display a modal.
        if($('#starterModal').is(':hidden')){
            $('#starterModal').show().wait(6000).hide();
        }
    }
});

$('#starter').click(function(){
    if($(this).attr('active') == "yes"){
        $(this).parent().find('#timer').click();
        $(this).html('>').attr({'active':'no'});

        //Update rewards taken
        console.log($(this).parent().parent().find('td:nth-child(1)').html());
        $.ajax({
            //You can ignore it either. It's working fine.
            type : 'POST',
            url  : '../files/php/update_rewardHistory.php',
            data : {id : $(this).parent().parent().find('td:nth-child(1)').html(), 
                    currency : "btc"
                   },
            success : function(data){}
        });
    }else{
        //You can ignore this part! It does display a modal.
        if($('#starterModal').is(':hidden')){
            $('#starterModal').show().wait(6000).hide();
        }
    }
});

$('#bList tr').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
    //console.log($(this).parent().parent().find('td:nth-child(1)').html());
});

那么，有没有办法做到这一点？

Answer 1

首先您应该知道 ID 应该是唯一的。在处理多个元素上的Click事件时，请使用class。

它将始终在第一个元素上触发，因为 jQuery 期望 ID 是唯一的。

$('.starter').click(function(){ 
    //code
})