jqueryで現在のクラス名を取得する方法

jQuery は、HTML 要素やページの操作を操作するための非常に便利なメソッドを提供する人気のある JavaScript ライブラリです。多くの場合、クラス名の追加、削除、切り替えなどのさまざまな操作を実行するには、現在の要素のクラス名を取得する必要があります。この記事では、jQuery を使用して現在のクラス名を取得する方法を説明し、いくつかの例を示します。

1. 現在のクラス名を取得する基本的な方法

現在の要素のクラス名を取得するには、jQuery の .attr() メソッドを使用し、パラメーターとして「class」を渡すことができます。

var className = $("element").attr("class");

このうち、「要素」は jQuery セレクター文字列で、クラス名、ID、タグ名など、任意の有効な CSS セレクターを使用できます。このコードは、現在の要素のすべてのクラス名をスペースで区切って含む文字列を返します。

たとえば、次の HTML コードがあります:

<div class="box small"></div>

次のコードを使用して、現在の要素のクラス名を取得できます:

var className = $("div.box.small").attr("class");
console.log(className); // 输出 "box small"

2. classList 属性を使用して現在のクラス名を取得します。

jQuery の .attr() メソッドを使用することに加えて、ネイティブ JavaScript の classList 属性を使用して現在のクラス名を取得することもできます。例:

var className = $("element")[0].classList;

このうち、「[0]」はjQueryオブジェクトをDOMノードに変換します。このコードは、すべてのクラス名を含む DOMTokenList オブジェクトを返すため、クラス名の追加、削除、切り替えが簡単になります。

たとえば、次の HTML コードがあります:

<div class="box small"></div>

次のコードを使用して、現在の要素のクラス名を取得できます:

var classList = $("div.box.small")[0].classList;
console.log(classList); // 输出 ["box", "small"]

3. 基本操作class name

1. クラス名の追加

jQuery を通じてクラス名を追加するには、.addClass() メソッドを使用できます。例:

$("element").addClass("new-class");

ここで、「new-class」は追加するクラスの名前です。このコードは、「new-class」というクラス名を現在の要素に追加します。

たとえば、次の HTML コードがあります:

<div class="box small"></div>

次のコードを使用して、新しいクラス名を追加できます:

$("div.box.small").addClass("big");

これにより、クラス名が追加されます。 current element クラス名「big」の場合、更新された HTML コードは次のとおりです:

<div class="box small big"></div>

2. クラス名を削除します

jQuery を通じてクラス名を削除するには、 .removeClass() メソッド。例:

$("element").removeClass("old-class");

ここで、「old-class」は削除するクラスの名前です。このコードは、現在の要素から「old-class」という名前のクラスを削除します。

たとえば、次の HTML コードがあります:

<div class="box small"></div>

次のコードを使用してクラス名を削除できます:

$("div.box.small").removeClass("small");

これにより、クラス名が現在の要素。small" クラス名、更新された HTML コードは次のとおりです:

<div class="box"></div>

3. クラス名の切り替え

jQuery を通じてクラス名を切り替えるには、.toggleClass() メソッドを使用できます。 。例：

$("element").toggleClass("class1 class2");

このうち、「class1 class2」は切り替え対象のクラス名であり、複数のクラス名はスペースで区切られます。このコードは、現在の要素内の 2 つのクラス名を切り替え、現在の要素に既に存在する場合は削除し、存在しない場合は追加します。

たとえば、次の HTML コードがあります:

<div class="box small"></div>

次のコードを使用して 2 つのクラス名を切り替えることができます:

$("div.box.small").toggleClass("small big");

これにより、次の名前のクラスが削除されます。現在の要素の「small」クラス名に「big」という名前のクラス名を追加すると、更新された HTML コードは次のようになります:

<div class="box big"></div>

4. アプリケーションの例

以下は、 jQuery を使用して現在のクラス名を取得する方法を示します:

1. 要素がクリックされたときに現在のクラス名を出力します:

$("div").click(function() {
  var className = $(this).attr("class");
  console.log(className);
});

2. ウィンドウが開いているときにナビゲーション バーのスタイルを切り替えるスクロール:

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  if (scrollTop >= 100) {
    $("nav").addClass("fixed-top");
  } else {
    $("nav").removeClass("fixed-top");
  }
});

3. カルーセル内の画像を切り替えるときに画像のタイトルを更新します:

$(".carousel-item").on("slide.bs.carousel", function() {
  var captionText = $(this).find(".carousel-caption h4").text();
  var className = $(this).attr("class");
  console.log("当前类名：" + className);
  $(".slider-title").text(captionText);
});

概要

この記事を通じて、jQuery を使用して現在の画像を取得する方法を学びました。クラス名を指定し、いくつかの例を使用してその方法を示しました。現在のクラス名は .attr() メソッドを通じて直接取得でき、クラス名の追加、削除、切り替えは .classList 属性を使用して簡単に行えます。この知識があると、JavaScript コードを作成するときに HTML 要素とスタイルを操作することが容易になります。

以上がjqueryで現在のクラス名を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。