jQueryでクラス名を置き換えるにはどうすればよいですか?

jQuery を使用してクラス名を置き換えるにはどうすればよいですか?

フロントエンド開発では、要素のクラス名を動的に変更する必要がある状況によく遭遇します。 jQuery は、豊富な DOM 操作メソッドを提供する人気の JavaScript ライブラリであり、開発者がページ要素を簡単に操作できるようにします。この記事では、jQueryを使って要素のクラス名を置換する方法と、具体的なコード例を紹介します。

まず、jQuery ライブラリを導入する必要があります。 jQuery がプロジェクトに導入されている場合は、次のコード例を直接使用できます。導入されていない場合は、CDN リンクを通じて導入できます:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

次に、要素のクラス名を次のコードで置き換えることができます:

// 选择需要替换class的元素，这里以id为example的元素为例
$('#example').removeClass('oldClassName').addClass('newClassName');

上記のコードでは、 #例 は、ID セレクターを通じて操作する必要がある要素を選択することです。 .removeClass('oldClassName') は要素の元の oldClassName を削除することを意味し、.addClass('newClassName') は要素 # に新しいものを追加することを意味します##新しいクラス名。

toggleClass() メソッドを使用することもできます。

// 选择需要替换class的元素，这里以id为example的元素为例
$('#example').toggleClass('oldClassName newClassName');

.toggleClass ('oldClassName newClassName') は、まず要素に oldClassName があるかどうかを確認し、ある場合はそれを削除して newClassName を追加し、そうでない場合は newClassName を追加します。 。

$('div.old').removeClass('old').addClass('new');