Question

我有这段代码

<tr class="job-order__row" id="accounting" style="display:none;">
  <td>1</td>
  <td>Doe</td>
  <td>John</td>
  <td>Accounting Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i></a>
    </div>
  </td>
</tr>
<tr class="job-order__row" id="hr" style="display:none;">
  <td>2</td>
  <td>Doe</td>
  <td>Luke</td>
  <td>HR Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i></a>
    </div>
  </td>
</tr>
<tr class="job-order__row" id="crm" style="display:none;">
  <td>3</td>
  <td>Doe</td>
  <td>Mark</td>
  <td>CRM Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i></a>
    </div>
  </td>
</tr>

和javascript / jquery代码

$(document).on('click', '.approvers > a', function(e) {
    e.preventDefault();
    var $id = $('.approvers > a').parents('tr').attr('id');
    $('#'+$id).hide();
  });

问题是，当我尝试点击.approvers > a此处的任何一部分时 $('.approvers > a').parents('tr').attr('id');代码仅返回Id名称"crm"。

我想要做的是每次点击.approvers > a我都会得到tr ID名称。

任何人都有同样的问题吗？

由于

Answer 1

@Tushar所说的是使用$(this)来引用所点击的元素，closest()来获取第一个父元素。

$(document).on('click', '.approvers > a', function(e) {
    e.preventDefault();
    var $id = $(this).closest('tr').attr('id');
    alert($id)
    $('#'+$id).hide();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="job-order__row" id="accounting" style="">
  <td>1</td>
  <td>Doe</td>
  <td>John</td>
  <td>Accounting Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i>click</a>
    </div>
  </td>
</tr>
<tr class="job-order__row" id="hr" style="">
  <td>2</td>
  <td>Doe</td>
  <td>Luke</td>
  <td>HR Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i>click</a>
    </div>
  </td>
</tr>
<tr class="job-order__row" id="crm" style="">
  <td>3</td>
  <td>Doe</td>
  <td>Mark</td>
  <td>CRM Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i>click</a>
    </div>
  </td>
</tr>
</table>

Answer 2

使用下面的代码，它会为您提供点击的项目tr /行ID 。

$("table tr").on('click', function (e) {
    console.log(e.currentTarget.id);
});

每次我点击.approvers＆gt;我无法获得tr id名称

2 个答案: