javascript - 单击 TD 内的 "OnClick"函数时，使用 jQuery 获取最接近的 TR？

Question

这可能吗？我使用内联 onclick 函数是否会阻止获取 TR 行？

我的表行如下所示:

<tr role="row" class="odd"><td><a class="masterskutd" id="mastersku_FL538-J"
      onclick="editMasterSKU('FL538-J');return false;">FL538-J</a></tr>

在外部 JS 文件 functions.js 中，我正在尝试这样的事情

function editMasterSKU(SKU) {
    var tr = $(this).closest('tr');
    $(tr).addClass('clicked');
    // var tr = $(this).parents('tr');
    console.log(tr);

我似乎没有做任何事情来捕捉函数被点击的TR，console.log只带回w.fn.init(0)(不完全是)确定这意味着什么)长度为 0，并且它不会将类添加到行中。

当点击 td/a 中的 onclick 函数时，如何获取 jQuery 变量中的 TR？

Answer 1

问题是因为从内联事件属性调用的函数不在引发事件的元素的范围内运行。相反，它们在 window 范围内运行，因此 this 不是您期望的那样。

要解决此问题，您可以将 this 作为参数从 onclick 传递给函数:

function editMasterSKU(a, SKU) {
  var tr = $(a).closest('tr');
  $(tr).addClass('clicked');
}

.clicked {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr role="row" class="odd">
    <td>
      <a class="masterskutd" id="mastersku_FL538-J" onclick="editMasterSKU(this, 'FL538-J');return false;">FL538-J</a>
    </td>
  </tr>
</table>

但是值得注意的是，您根本不应该使用内联事件属性。请改用不显眼的事件处理程序。由于您已经在页面中包含 jQuery，因此可以像这样完成:

jQuery(function($) {
  $('.masterskutd').on('click', function(e) {
    e.preventDefault();
    var $tr = $(this).closest('tr');
    $tr.addClass('clicked');
    console.log($(this).data('sku'));
  });
})

.clicked a {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr role="row" class="odd">
    <td>
      <a class="masterskutd" id="mastersku_FL538-J" data-SKU="FL538-J" href="#">FL538-J</a>
    </td>
  </tr>
</table>

请注意使用 data 属性在元素本身中存储自定义元数据，以及添加 href 属性，这是 HTML 所必需的才有效。