Question

给出以下html：

<ul class="sub-categories">
    <li>
        <a href=""><img src="" alt=""></a>
        <h2 class="sub-header">
            <a href="">category name</a>
        </h2>
    </li>
</ul>

我想将'current'类添加到'.sub-header'中的'a'标签中，无论点击哪个锚点。

以下内容仅在我点击第一个锚点时有效。

$('ul.sub-categories li a').click(function(event) {
    event.preventDefault();

    $(this).next(".sub-header").children('a').addClass("current");
});

无论点击哪个锚点，如何使其工作？

Answer 1

活动授权：

$('ul.sub-categories>li').on('click', 'a', function(event) {
  event.preventDefault();
  $(event.delegateTarget).find('h2>a').addClass("current");
});

http://jsbin.com/wajerujose/1/edit?html,css,js,output

Answer 2

试试这个：

$('ul.sub-categories li a').click(function (event) {
    event.preventDefault();
    // works for first a clicked only        
    $(this).next(".sub-header").children('a').addClass("current");
});

Answer 3

$('.sub-categories li').click(function(event) {
  event.preventDefault();
  $(this).find('.sub-header a').addClass("current");
});

Answer 4

试试这个：

$('ul.sub-categories > li > a').click(function (event) {
    event.preventDefault();       
    $(this).next(".sub-header").find('a').addClass("current");
});

主要是将选择器从ul.sub-categories > li > a更改为ul.sub-categories li a。由于ul.sub-categories li a正在<a>内获取所有.sub-categories，而您的目标只是那些直接定位到<a>的{{1}}个标记。

Answer 5

我在这个网站上做了更多的研究，一直在玩，找到了有用的东西。我不确定它是否是最优雅的解决方案，但它确实有效。

$('ul.sub-categories li a').click(function(event) {
    event.preventDefault();

   if ($(this).parent().is(".sub-header")) {
        $(this).addClass("current");
    } else {
        $(this).next(".sub-header").children('a').addClass("current");
    }
});

当我点击多个元素时，如何使用jQuery添加类

5 个答案: