连接 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

方法一hasClass()

$self.hasClass("bar") && $self.removeClass('bar');

方法二is()

$seld.is(".bar")  && $self.removeClass('bar');

方法三filter()

$seld.filter(".bar").removeClass('bar');

Answer 2

您可以使用 is 或 hasClass 来检查当前元素是否也有 bar class:

$('.foo').on('click', function () {
    $self = $(this);
    $self.is('.bar') && $self.removeClass('bar');
});

Answer 3

使用这个简单的逻辑：If X has a class Y, remove class Y from X.

代码如下：

$('.foo').on('click', function () {

    $self = $(this);

    if($self.hasClass('bar'))
        $self.removeClass('bar');

});

阅读：

Answer 4

如果您为每个父元素使用 id，您可以使用类似 :

$('.foo').on('click', function () {
   $('#'+this.id).removeClass('bar'); // it will remove child class bar
)};

Answer 5

当前的所有答案都假定单击的 .foo 将是仅 .foo 和 class bar.

...如果情况总是如此，那就太好了，但请注意，这些答案不是直接替代您所得到的（因为您正在寻找所有 .foo 与 class bar)。以下将是 more 直接替换：

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

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

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

此外，在删除 class 之前检查 jQuery 元素是否具有 class 有点多余；因为如果您告诉它从元素中删除不存在的 class，jQuery 不会呕吐；它什么也做不了。

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

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

self.removeClass('bar');

连接 CSS 个选择器

Concatenate CSS selectors

css

jquery

css-selectors

jquery-selectors