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>

然后，我有一个绑定到那些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));
});

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

$('#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中的工作方式。在您尝试重写时，“toggleClass（）”参数中this的值将为this，因为它位于外整个jQuery函数调用链。它与通过调用“toggleClass（）”处理的<a>元素完全无关。

Answer 2

当你的函数是触发器时，即在单击该函数时，你可以通过使用$（this）获得对被点击元素的引用。那么你的代码应该是

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

jQuery函数问题（父/子）

2 个答案: