4 
if ($(this).hasClass('white')) {console.log('white');};

等于 true 并打印到控制台。我如何测试它是否white在 $(this) 选择器上没有类？我有

if ($('this:not(.white)')) {console.log('not white');};
and
if ($(this).not('.white')) {console.log('not white');};
and
several other combinations?

我知道我可能应该使用 .not() 方法，但不知道如何将 :not 选择器与$(this)选择器结合使用。

我希望当元素被点击时，我可以看到一个正确和一个错误的陈述。（它有或没有“白色”类）

4

6 回答 6

12

你可以使用not logical operator，试试这个：

if (!$(this).hasClass('white')) {console.log('not white');};

如果其单个操作数可以转换为 true，则返回 false；否则，返回真。

于 2012-07-24T07:39:57.153 回答
5

我认为这可能对您了解您在这两个陈述中跨越的领域有所帮助。

if ($('this:not(.white)')) {console.log('not white');};

该语句将不起作用，因为选择器 -this:not(.white)将查找这种类型的元素：<this class="white"></this>. 换句话说，您的选择器正在寻找一个this不属于 class的 type 的 HTML 元素white。

if ($(this).not('.white')) {console.log('not white');};

在这种情况下，您正在使用$(this)，它将this关键字引用的 JavaScript 对象包装在 jQuery 对象中，从而允许您针对该 DOM 元素使用 jQuery 方法。

为了获得您正在寻找的效果，您必须了解您传递给 a 的任何 STRING 选择器$(selector)都受限于 CSS 可以匹配的选择器。因此 - 你不能那样使用你的“this”关键字。

但是，您可以执行以下操作来检查您的效果：

if ($(this).is(':not(.white)')) {
    console.log('Not White! :(');
} else {
    console.log('White! :D');
}

因为您将this其放入$()块内，所以结果是应用的任何进一步的 jQuery 链式方法都将针对this您当前上下文中引用的 DOM 元素进行解析。然后，您将使用 CSS:not()选择器检查类。

但是请注意，这种方法的局限性在于，如果出于某种原因this引用了多个 DOM 元素，则仅当所有此类元素都与选择器匹配.is()时才会返回结果。true所以 - 考虑这个例子：

<div class="one white element"></div>
<div class="one black element"></div>
<div class="one green element"></div>

$('.one.element').bind('click', function () {
    // In this context, 'this' refers to the element which was clicked.
    console.log( $(this).is(':not(.white)') );

    // If you click either the black or green element, you will get a 'true',
    // because those elements are not .white.
    // If you click the white element, you will get a 'false',
    // because that element does have the .white class
});

问题是this大多数 JavaScript 应用程序中的上下文经常发生变化，因此我认识的大多数程序员尽可能避免使用它。比上面更安全的是：

$('.one.element').bind('click', function (ev) {
    var $el = $(ev.target);
    console.log( $el.is(':not(.white)') );

    // In this case, you avoid 'this' entirely, and target the actual element
    // from which the event originated.
});

但是，在这种情况下，您会遇到嵌套项引发错误目标的问题。考虑这种情况：

<div class="parent">
    <div class="child">
        text
    </div>
</div>

$('.parent').bind('click', function (ev) {
    var $el = $(ev.target);
    console.log( $el.attr('class') );
});

在这种情况下，如果您单击parent自身，您将得到parent结果。但是，如果单击子元素，即使事件绑定到父元素，也会child因为事件冒泡而得到。实际事件是由子元素引发的，因此您定位错误。

所以 - 通常当你在构建插件时，小心控制你的引用是明智的。

例子

<div class="parent">
    <div class="child">
        text
    </div>
</div>

var $parent = $('.parent').bind('click', function () {
    console.log( $parent.attr('class') );
});

现在，无论您单击父项还是子项都没有关系，您会得到正确的结果，并且您知道所引用的内容。不会混淆this上下文变化，也不会使用从属节点的属性。

顺便说一句-此处其他答案中发布的任何方法也是有效的。

// The following will all tell you if the node HAS the class:
$(selector).hasClass('white')
$(selector).is('.white')
$(selector).is('[class*=white]')

// The following will all tell you if the node DOES NOT have the class:
!$(selector).hasClass('white')
$(selector).not('.white')
$(selector).is(':not(.white)')

并且 - 还有其他方法可以做到这一点，但其中任何一种都应该适用于您的目的。:)

于 2012-07-24T21:52:52.563 回答
2

使用逻辑非运算符

if (!$(this).hasClass('white')) {console.log('not white');};
于 2012-07-24T07:40:46.137 回答
1 
!$(this).hasClass('white')

使用纯 JavaScript

于 2012-07-24T07:39:58.210 回答
1

不使用!，例如：

if (!$(this).hasClass('white'))
  ...
于 2012-07-24T07:50:39.370 回答
0

或者：

<div class="vvvv vvvvv white nnnnnn" id="test"></div>

if($("#test[class*=white]").length > 0){
    console.log('white');
}else{
    console.log('no white');
}
于 2012-07-24T08:15:25.377 回答