jquery - 连接 CSS 选择器

Question

有没有更聪明的方法，我可以使用 $self 而不是在 $('.foo.bar') 中使用 foo。 .. ？感觉额外的 foo 是多余的。我不想查看我已经找到的一些选择器。

$('.foo').on('click', function () {
    $self = $(this);
    $('.foo.bar').removeClass('bar'); // Works but feels wrong.
    //$self('bar').removeClass('bar'); // Use something that doesn't uses 'foo' again..
});

编辑:

标记代码:

<div class="foo bar">
</div>

注意 $('.foo.bar') 在 foo 和 bar 之间没有空格。

Answer 1

所有当前的答案都假定点击的 .foo 将是唯一 .foo 类 bar。

...如果情况总是如此，那就太好了，但请注意，这些答案不是您所拥有的内容的直接替代(因为您正在寻找所有 .foo 属于 bar 类)。以下将是更多直接替换:

var foos = $('.foo').on('click', function () {
    $self = $(this);

    foos.filter('.bar').removeClass('bar');
});

...但请注意，此代码仍然不是直接替换，因为您的代码将获得.foo 在触发点击事件时在 DOM 中，而我建议的替代方案将在点击事件被绑定(bind)时获取 .foo 的 .

---

此外，在删除该类之前检查 jQuery 元素是否具有类，有点多余；因为如果你告诉它从一个元素中删除一个不存在的类，jQuery 不会吐出来；它不会做任何事情。

if (self.hasClass('bar')) {
    self.removeClass('bar');
}

...相反，只需这样做:

self.removeClass('bar');