jQueryで要素にクラスを追加、または削除するサンプルコード
以下に、jQueryを使用して要素にクラスを追加または削除するサンプルコードを示します。
要素にクラスを追加する場合:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Class Manipulation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#add-class-button").click(function(){
$("#target-element").addClass("new-class");
});
});
</script>
</head>
<body>
<div id="target-element">対象の要素</div>
<button id="add-class-button">クラスを追加</button>
</body>
</html>
上記のコードでは、#add-class-buttonというIDを持つボタンをクリックすると、#target-elementというIDを持つ要素にnew-classというクラスが追加されます。
要素からクラスを削除する場合:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Class Manipulation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#remove-class-button").click(function(){
$("#target-element").removeClass("existing-class");
});
});
</script>
</head>
<body>
<div id="target-element" class="existing-class">対象の要素</div>
<button id="remove-class-button">クラスを削除</button>
</body>
</html>
上記のコードでは、#remove-class-buttonというIDを持つボタンをクリックすると、#target-elementというIDを持つ要素からexisting-classというクラスが削除されます。
これらのコードをブラウザで実行すると、要素にクラスが追加または削除されることが確認できます。
toggle()関数を使った方法
toggle()関数を使用して要素にクラスを追加または削除する方法もあります。以下にサンプルコードを示します。
要素にクラスを追加または削除する場合:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Class Manipulation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggle-class-button").click(function(){
$("#target-element").toggleClass("new-class");
});
});
</script>
</head>
<body>
<div id="target-element">対象の要素</div>
<button id="toggle-class-button">クラスの追加/削除</button>
</body>
</html>
上記のコードでは、#toggle-class-buttonというIDを持つボタンをクリックすると、#target-elementというIDを持つ要素にnew-classというクラスが追加されたり削除されたりします。要素がクラスを既に持っている場合は削除し、持っていない場合は追加します。
このコードをブラウザで実行すると、ボタンをクリックするたびに要素のクラスがトグルされることが確認できます。