jquery - 既存の要素に応じた body クラスの追加/削除

Question

ログインしているかどうかに応じて、異なる背景画像が必要です。これまでのところ、jQuery を使用して本体にクラスを追加/削除しようとしましたが (ログインボックスを使用して、ログインしているかどうかを確認します)、想定どおりに動作しません。

最初の if ステートメントが機能し、クラス 'index' が本文に設定されますが、ログインフォームがもう存在しない場合でも、クラスは削除されません。

では、このコードを変更して、希望どおりに機能させるにはどうすればよいでしょうか? 前もって感謝します。

if($('#loginForm')) {
    $('body').addClass('index');
}
else {
    $('body').removeClass('index');
}

score 2 · Accepted Answer

if($('#loginForm'))jquery は要素が存在しなくても空のオブジェクトを作成するため、常に true を返します。lengthjQuery要素オブジェクトが存在するかどうかをテストするために使用します

$('body').toggleClass('index', $('#loginForm').length );

toggleClass を使用するとコードを短縮できます。2 番目の引数はブール値です

score 1 · Accepted Answer

プロパティを使用してlength、要素が存在するかどうかをテストできます。

if ($('#loginForm').length) {
    $('body').addClass('index');
}
else {
    $('body').removeClass('index');
}

jQuery の組み込みsize()メソッドを使用することもできますが、可能な場合はネイティブプロパティを使用することをお勧めします。

2 に答える 2