jqueryはクラスを削除します

フロントエンド開発では、さまざまなインタラクティブな効果を実現するために、DOM 要素の class 属性を操作する必要があることがよくあります。 jQuery では、要素の class 属性を簡単に操作できます。しかし、特定のクラスを削除する必要がある場合があります。このときはどうすればよいでしょうか?この記事ではjQueryを使ってクラスを削除する方法を紹介します。

1.removeClass メソッドを使用する

jQuery には、要素のクラスを削除するためのremoveClass というメソッドが用意されています。形式は以下のとおりです。

$(selector).removeClass(className)

このうち、selectorは操作対象の要素のセレクタ、classNameは削除対象のクラス名です。

たとえば、ID が「test」の要素の「active」という名前のクラスを削除する場合は、次のように記述できます。

$("#test").removeClass("active");

このメソッドは、選択された要素を指定します。クラスがクラスリストから削除されます。

複数のクラスを削除する場合は、例:

$("#test").removeClass("active hidden");

2 のように、クラスをスペースで区切る必要があることに注意してください。使用する以外に、attr メソッド

を使用します。 RemoveClass メソッド、attr メソッドを使用してクラスを削除することもできます。

$(selector).attr("class", "")

このメソッドは、選択した要素の class 属性の値を空の文字列に設定します。これは、すべてのクラスを削除するのと同じです。

$("#test").attr("class", "");

3. toggleClass メソッドを使用する

クラスの削除に加えて、クラスを切り替える必要がある場合もあります。 toggleClass メソッドを例に挙げると、指定したクラスを追加または削除できます。要素に指定したクラスが既に存在する場合はそのクラスが削除され、そうでない場合はクラスが追加されます。

toggleClass メソッドに 2 つのパラメータを渡すことができます。1 つは切り替えられるクラス名で、もう 1 つはオプションの switch パラメータです。 switch パラメータが true の場合はクラスが追加され、switch パラメータが false の場合はクラスが削除されます。

次は、toggleClss メソッドの形式です:

$(selector).toggleClass(className, switch)

たとえば、ボタンがあり、そのクラスを使用してボタンの状態を切り替えることができます (「アクティブ」に切り替えるなど)。

$("#btn").click(function(){
  $(this).toggleClass("active disabled");
});

ボタンをクリックすると、それに応じてクラスが追加または削除されます。

概要

要するに、jQuery でクラスを削除するのは非常に簡単で、removeClass メソッドまたは attr メソッドを使用するだけです。クラスを切り替える必要がある場合は、toggleClass メソッドを使用します。これらのメソッドは jQuery でよく使用されるもので、これらをマスターすると、フロントエンド開発の半分の労力で 2 倍の結果を得ることができます。

以上がjqueryはクラスを削除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。