Jquery 连接CSS选择器

有没有一种更聪明的方法可以让我使用

$self

而不是在

$（'.foo.bar'）

中使用

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

之间没有空格

方法2

是（）

方法3
过滤器（）

您可以使用
is
或
hasClass
检查当前元素是否也具有
条形图
类：

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

使用以下简单逻辑：
如果X有一个类Y，则从X中删除类Y。

代码如下：

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

    $self = $(this);

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

});

阅读：




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

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

所有当前的答案都假定单击的
.foo
将是唯一一个带有类
条的
.foo

。。。如果总是这样，那就太好了，但请注意，这些答案并不能直接替代你所得到的（因为你在类
栏中查找所有
.foo
）。以下是更直接的替代：

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

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

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


另外，在删除一个jQuery元素之前，检查该元素是否有一个类是多余的；如果您告诉jQuery从元素中删除一个不存在的类，它就不会呕吐；它什么也做不了

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

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

self.removeClass('bar');

你到底想干什么？你想只从点击的元素中删除css
.bar
类还是从所有的
.foo
元素中删除css
.bar
类？我想你的选择器是正确的。我无法让任何建议起作用，我大部分都有一个bug。我试试看more@radbyx：如果您在获得任何建议时遇到问题，您可以发布一个JSFIDLE/jsBin来演示您的建议吗？是的，我将在尝试您的答案后构建一个FIDLE。最后一个我没有。方法1和2不起作用，因为
是
并且
hasClass
返回布尔值，而不是jQuery对象。另外，
filter
将查找所有具有
bar
类的子元素，而不仅仅是单击的元素。将foos保存在外部对我有用。那么食物的寿命是多少？我是否需要担心它会对全局名称空间或窗口对象产生争议？我没有动态添加任何foo。@radbyx：生存期将与捕获
foos
变量的任何闭包一样长（换句话说，可以访问
foos
的任何函数的生存期）。在将代码缩减为的简单情况下，这将是
.foo
上的单击处理程序的生命周期。我假设代码位于
$（document）.ready（）
块中，如果
foos
是在该块的本地定义的，则根本不在全局范围内。如果你想进一步缩小范围，你可以使用iLife，谢谢你提供的信息。顺便说一句，你的解决方案很好，很有意义，但我还有最后一个问题。这仍然让人觉得是一种权衡，而不仅仅是一场胜利。您的解决方案重用了allready发现的内容，但引入了一个变量。我想我的比较慢，但是没有新的变量。你会用什么？我知道，在上一篇文章中，它甚至可能不应该被禁止，因为它是一个静态菜单，实际上只有很少的项目。：）@radbyx：值得一提的是，JavaScript中的变量非常便宜，所以使用它们几乎不会有任何损失。从更一般的意义上讲，一个领域的绩效提升通常是以其他领域的绩效下降为代价的；在原始代码中，虽然您没有定义
foos
变量的“设置”成本（虽然很小，但仍然存在），但每次调用click处理程序时，您都要重新查找
.foo.bar
。在我的代码中，您有初始设置时间，但在单击处理程序中获得。。。。在这些情况下，我尝试针对“常见情况”进行优化；您只需支付一次安装成本，但单击处理程序可能会被触发多次，因此在我看来，优化单击处理程序是有意义的。因此，我选择使用
foos
变量；但同样，无可否认，这里的性能提升很小。
var foos = $('.foo').on('click', function () {
    $self = $(this);

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

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

self.removeClass('bar');