使用jQuery在表行的div中显示/隐藏图标

Question

我有一个表，它是使用foreach显示的数据。 一栏包含3个图标，默认情况下它们是隐藏的。 并且也有复选框。 图标和复选框在每一行中。 现在，选中任何复选框时，将显示所有行的图标。 相反，我希望在选择复选框时只显示一行图标。 请有人帮忙。 提前致谢。 这是代码。 鉴于

<?php $sn= $this->uri->segment(4); foreach($companies as $company){ $sn++;?>
   <tr class="parent" style="font-size:11px;color:#3D4061;border-bottom:1px solid #3d406136">
      <td><input type="checkbox" class="text-center check_data mt-2" onchange="changevalue()"></td>
      <td class="text-center" style=""><h6><?php echo $sn; ?></h6></td>
      <td class="text-center" style=""><h6><?php echo $company->company_name; ?></h6></td>
      <td class="text-center" style=""><h6><?php echo $company->contact_no; ?></h6></td>
      <?php if($company->activation_status == 1){?>
        <td class="text-center" style=""><h6 class="text-success font-weight-bold" style="font-size:13px">Active</h6></td>
      <?php } ?>
      <?php if($company->activation_status == 0){?>
        <td class="text-center" style=""><h6 class="text-danger font-weight-bold" style="font-size:13px">Inactive</h6></td>
      <?php } ?>
      <td class="text-center" style="">
        <div class="status">
          <a href="<?php echo base_url().'superadmin/company_ctrl/edit_company/'.$company->id; ?>" data-toggle="tooltip" data-placement="top" title="EDIT" class="f13"><i class="fa fa-edit"></i></a>
          <?php if($company->activation_status == 0){?>
            <a href="<?php echo base_url().'superadmin/company_ctrl/activate_company/'.$company->id; ?>" data-toggle="tooltip" data-placement="top" title="ACTIVE" class="f13"><i class="fa fa-dot-circle-o"></i></a>
          <?php }else{ ?>
            <a href="<?php echo base_url().'superadmin/company_ctrl/deactivate_company/'.$company->id; ?>" data-toggle="tooltip" data-placement="top" title="INACTIVE" class="f13"><i class="fa fa-exclamation-triangle"></i></a>
          <?php } ?>
            <a href="<?php echo base_url().'superadmin/company_ctrl/delete_company/'.$company->id; ?>" data-toggle="tooltip" data-placement="top" title="DELETE" class="f13 delete_row"><i class="fa fa-trash-alt"></i></a>
        </div>
       </td>
       <td ><i class="fa fa-chevron-down down" ></i></td>
   </tr>

和脚本是

  <script>
  $('.status').hide();
    function changevalue(){
      if($(".check_data").is(":checked"))
      $('.status').show();
      else
      $(".status").hide();
      $('.cchild').hide();
    }
</script>

Answer 1

您可以为每个复选框和状态div赋予动态ID。 使用记录的ID可能是companyId来创建ID，例如

<input type="checkbox" id="checkbox_('<?php echo $company->id; ?>')>

我不知道php的语法。

然后您可以在onchange="changevalue(companyId)"传递当前的onchange="changevalue(companyId)"

然后您的代码将像这样

function changevalue(companyId){
      if($("#checkbox" + companyId).is(":checked"))
      $('#status' + companyId).show();
      else
      $("#status" + companyId).hide();
    }

Answer 2

您还可以使用.parent()和.find()方法来获取特定行，如下所示：

<input type="checkbox" function="changevalue(this)">

并且您的javacript必须是这样的：

function changevalue(elem){
  if($(elem).is(":checked"))
  $(elem).parent().parent().find('.status').show();
  else
  $(elem).parent().parent().find('.status').hide();
}

这段代码可以简化，但这是理解html元素parent-child用法的一个很好的入门示例。 在此示例中，第一个.parent()移至复选框元素的<td> ，第二个.parent()移至<tr>元素，然后在其中搜索.status类，然后将其隐藏。

您可以这样简化：

function changevalue(elem){
  if($(elem).is(":checked"))
  $(elem).parents("tr").find('.status').show();
  else
  $(elem).parents("tr").find('.status').hide();
}

Answer 3

function changevalue() {
    var $this = $(this),
        $status = $this.parents("tr").find(".status");

    if ($this.is(":checked")) {
        $status.show();
    } else {
        $status.hide();
    }
}