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)。

要素がクリックされたときに、1 つの true ステートメントと 1 つの false ステートメントが表示されるようにしたいと考えています。(クラス「白」を持っているか持っていないかのどちらかです)

4

6 に答える 6

12

を使用できますnot logical operator。これを試してください:

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

単一のオペランドを true に変換できる場合は false を返します。それ以外の場合は true を返します。

于 2012-07-24T07:39:57.153 に答える
5

これら 2 つのステートメントで交差しているドメインを理解することが役立つと思います。

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

セレクター -this:not(.white)はこの種類の要素を探すため、このステートメントは機能しません: <this class="white"></this>. thisつまり、セレクターは、クラスではないtype の HTML 要素を探していますwhite。

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

この場合、キーワードが参照$(this)する JavaScript オブジェクトをthisjQuery オブジェクトでラップする を使用しているため、その DOM 要素に対して jQuery メソッドを利用できます。

探している効果を得るには、に渡すすべての STRING セレクターが、$(selector)CSS が一致できるセレクターに制限されていることを理解する必要があります。したがって、「this」キーワードをそのように使用することはできません。

ただし、効果を確認するためにできることは次のとおりです。

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

thisブロック内に配置したため、適用されるさらに jQuery チェーン メソッドは、現在のコンテキスト$()で参照する DOM 要素に対して解決されます。this次に、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
});

問題は、ほとんどの JavaScript アプリケーションでかなり頻繁にコンテキストがthis変更されることです。そのため、私が知っているほとんどのプログラマーは、可能な限りそれを使用することを避けています。上記よりも安全なのは次のとおりです。

$('.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

使用!しないでください。例：

if (!$(this).hasClass('white'))
  ...
于 2012-07-24T07:50:39.370 に答える
1 
!$(this).hasClass('white')

プレーンな JavaScript の使用

于 2012-07-24T07:39:58.210 に答える
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 に答える