當$（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時，我使用jQuery的.siblings（）函數。但我試圖用它來執行同樣的通緝行動，但我沒有弄明白。

這是我試過的腳本：

$('#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應該是唯一的。
因此，爲了使這項工作，互換類，它會很好地工作：

$('.open').click(function() { 
 
    var tr = $(this).closest('tr') , 
 
     timer = tr.find('.timer') , 
 
     starter = tr.find('.starter'); 
 
    
 
    if(timer.hasClass('ended')) { 
 
    starter.html('Start Timer!  >').attr({ 
 
     'active': 'yes' 
 
    }); 
 
    } else { 
 
    if ($('#starterModal').is(':hidden')) { 
 
     $('#starterModal').show().wait(6000).hide(); 
 
    } 
 

 
    } 
 
}); 
 

 
$('.starter').click(function() { 
 
    var elem = $(this), 
 
     tr = elem.closest('tr'), 
 
     timer = tr.find('.timer'); 
 
    if(elem.attr('active') == "yes") { 
 
    timer.click(); 
 
    elem.html('>').attr({ 
 
     'active': 'no' 
 
    }); 
 

 
    //update rewards taken 
 
    console.log(tr.find('td:nth-child(1)').html()); 
 
    /*$.ajax({ //you can ignore it also! 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! do 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()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <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 class="timer countdown callback ended" onclick="return false;" data-inc="0" data-time="10" data-id="btc2" rel="nofollow"></span> 
 
     <span class="starter" active="yes"> > </span> 
 
     </td> 
 
     <td class="center"> 
 
     <span class="open">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 class="timer countdown callback ended" onclick="return false;" data-inc="0" data-time="10" data-id="btc1" rel="nofollow"></span> 
 
     <span class="starter" active="no"> > </span> 
 
     </td> 
 
     <td class="center"> 
 
     <span class="open"> Open </span> 
 
     </td> 
 
     <td class="center"></td> 
 
     <td class="center"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

起初你應該知道ID應該是唯一的。處理Click多個elements事件時，請改爲使用class。

由於jQuery預計ID是唯一的，它將始終在第一個元素上觸發。

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