Question

我是否有更聪明的方法可以$self使用foo而不是$('.foo.bar')中使用$('.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.. });？感觉就像额外的foo是redundent。我不想透过我已经找到的一些选择器进行查看。

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

修改：

标记代码：

$('.foo.bar')

注意foo在bar和{{1}}之间没有空格。

Answer 1

所有当前答案都假定点击的.foo将是仅 .foo，其中包含bar类。

...如果情况总是如此，那么很好，但请注意，这些答案不是直接替换你所拥有的（因为你寻找所有 .foo与班级bar）。以下将更多直接替换：

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

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

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

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

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

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

self.removeClass('bar');

Answer 2

方法1 hasClass()

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

方法2 is()

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

方法3 filter()

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

Answer 3

您可以使用is或hasClass来检查当前元素是否也包含bar类：

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

Answer 4

使用这个简单的逻辑：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 5

如果您为每个父元素使用id，则可以使用以下内容：

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

连接CSS选择器

5 个答案: