jQuery 中的“没有类”选择器。 通过包含多个类的特定类名选择一个元素

Question

我想通过特定的类名选择一个元素（该元素包含多个类）。 我已经参考了这个答案，但对我不起作用。

<i class="fas fa-star fa-lg clicked"></i>
<i class="fas fa-star fa-lg"></i>
<i class="fas fa-star fa-lg"></i>

clicked是一个带有color:red内部的自定义类。

Javascript代码：

$("i").click(()=> {
    changeColor();
})

const changeColor = () => {
    if (!$(this).hasClass('clicked')) {
        console.log('not clicked class')
    }
}

或者

const changeColor = () => {
   if ($("i:not(.clicked)")){
     console.log("no clicked class")
   }
}

两种实现都不起作用。 如果你知道为什么，请告诉我。

Answer 1

您没有正确捕获this引用，箭头符号不能使用隐式this引用，避免将它与jQuery ：

箭头函数表达式的语法比函数表达式短，并且没有自己的this 、 arguments 、 super或new.target 。 这些函数表达式最适合非方法函数，它们不能用作构造函数。

我已经重新编写了您的代码，因此它可以按您的预期工作：

 $("i").click(function() { changeColor($(this)); }); const changeColor = (obj) => { if (!obj.hasClass('clicked')) console.log('not clicked class'); }

 .as-console {background-color:black !important; color:lime;} .clicked { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <i class="fas fa-star fa-lg clicked">Button 1</i> <i class="fas fa-star fa-lg">Button 2</i> <i class="fas fa-star fa-lg">Button 3</i>

Answer 2

您可以使用event.currentTarget而不是提到this ：

 $("i").click(function(event) { changeColor($(event.currentTarget)); }); const changeColor = ($element) => { if (!$element.hasClass('clicked')) console.log('not clicked class'); }

 .clicked { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <i class="fas fa-star fa-lg clicked">Button 1</i> <i class="fas fa-star fa-lg">Button 2</i> <i class="fas fa-star fa-lg">Button 3</i>

在代码中使用this可能会令人困惑，因为您需要很好地了解它是如何工作的。 因为这个，很多人倾向于不使用它。

请记住，我将obj重命名为$element 。 我强烈建议使用$前缀来表明这个变量包含一个 jQuery。

Answer 3

您可以尝试使用element.is('.clicked')吗？ 你可以尝试用多台组合IS