javascript - jQuery 函数问题(父/子)

Question

我写的 jQuery 脚本有一个小问题。

我有一个这样的 HTML 结构:

<div id="navigation">
  <ul>
    <li><a href="Link1"><b>Text1</b></a></li>
    <li><a href="Link2"><b>Text2</b></a></li>
    ...
  </ul>
</div>

然后，我将点击功能绑定(bind)到那些 li/a 选项卡，将当前页面的值设置为 href:

var currentpage = $(this).attr('href');

最后，一个更新函数会在需要时触发，它可以做很多事情，但也会更改当前选定的 li/a 选项卡的样式:

$('#navigation a').each(function()
{
  var tab = $(this);
  tab.parent().toggleClass('current', (tab.attr('href') == currentpage));
});

一切正常，但今天我试图只在一行上重写最后一个函数 - 没有调用 each() - 但我无法让它工作。 我尝试了很多解决方案，例如:

$('#navigation a').parent().toggleClass('current', ($(this).children(':first').attr('href') === currentpage));

$('#navigation a').parent().toggleClass('current', ($(':only-child', $(this)).attr('href') == currentpage));

有人能帮帮我吗？ 谢谢!

Answer 1

你不能随心所欲地重写它。

原始代码必须使用“.each()”，因为它需要访问每个个体 <a>元素来做它的事情。在你的重写中，你想象你可以获得 this设置为正在处理的每个元素，但这不是 this 的方式在 JavaScript 中工作。在您尝试重写时，this 的值在“toggleClass()”的那些参数中将是this因为它位于整个 jQuery 函数调用链的外部。它与 <a> 绝对无关通过调用“toggleClass()”处理的元素。