当$(this）单击时，在每个tr中单独执行onclick函数

Execute an onclick function alone in every tr when $(this) clicked?

本文关键字：tr 单独 执行 函数 onclick this 单击      更新时间：2023-09-26

我想在点击tr时在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!&nbsp;>');*/
    if($(this).parent().parent().find('#timer').hasClass('ended'))
    {
        $(this).parent().parent().find('#starter').html('Start Timer!&nbsp;&nbsp;>')
               .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());
});

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

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

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

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

如注释中所述，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!&nbsp;&nbsp;>').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>

相关文章：