HOWTO · jQuery
jQuery 置換クラス
このチュートリアルでは、jQuery でクラスを置き換える方法を示します。
このページの内容
このチュートリアルでは、jQuery でクラスを置き換える方法を示します。
jQuery は、HTML 要素のクラスを置き換える組み込みメソッドを提供しませんが、クラス置換機能を実現するために使用できる他のメソッドをいくつか提供します。 このチュートリアルでは、jQuery を使用してクラスを別のクラスに置き換えるさまざまな方法を示します。
removeClass() と addClass() を使用して jQuery のクラスを置き換える
removeClass() 関数は jQuery の要素からクラスを削除するために使用され、addClass() メソッドはクラスを HTML 要素に追加します。 これらのクラスを一緒に実装して、replaceClass メソッドを作成できます。
removeClass() メソッドの構文:
$(Selector).removeClass(Class);
addClass() メソッドの構文:
$(Selector).addClass(Class);
上記の class は、削除または追加されるクラス名です。 両方の方法を使用して、関数 replaceClass を作成できます。 例を試してみましょう。
<html lang="en">
<head>
<meta charset="utf-8">
<title> Remove and Add in jQuery. </title>
<style>
.light_blue {
background-color: lightblue;
}
.dark_blue {
background-color: darkblue;
}
div {
width: 400px;
height: 400px;
border: 5px solid lightgreen;
}
button {
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="demoDiv" class="light_blue"></div>
<button id="darkblue">Dark Blue</button>
<button id="lightblue">Light Blue</button>
<script>
function replaceClass(Element_Id, Class1, Class2) {
var HTML_Element = $(`#${Element_Id}`);
if (HTML_Element.hasClass(Class1)) {
HTML_Element.removeClass(Class1);
}
HTML_Element.addClass(Class2);
}
$(document).ready(function() {
$("#darkblue").click(function() {
replaceClass("demoDiv", "light_blue", "dark_blue");
});
$("#lightblue").click(function() {
replaceClass("demoDiv", "dark_blue", "light_blue");
});
});
</script>
</body>
</html>
上記のコードは、removeClass および addClass メソッドを使用して HTML 要素のクラスを置換する関数 replaceClass を作成します。
replaceClass() 関数は 3つのパラメーターを取ります。1つ目は要素の ID、2つ目は置き換えられるクラス、3つ目は指定されたクラスを置き換えるクラスです。 出力を参照してください。
同様に、複数のクラスを置き換えたい場合は、removeClass および addClass メソッドにスペースを入れてから、他のクラスの名前を入れることができます。 例を見てみましょう。
<html lang="en">
<head>
<meta charset="utf-8">
<title> Remove and Add in jQuery. </title>
<style>
.light_blue {
background-color: lightblue;
}
.border1 {
border: 5px solid black;
}
.dark_blue {
border: 5px solid green;
}
.border2 {
background-color: darkblue;
}
div {
width: 400px;
height: 400px;
border: 5px solid lightgreen;
}
button {
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="demoDiv" class="light_blue"></div>
<button id="darkblue">Dark Blue</button>
<button id="lightblue">Light Blue</button>
<script>
$(document).ready(function() {
$("#darkblue").click(function() {
$("#demoDiv").removeClass("light_blue border1")
$("#demoDiv").addClass("dark_blue border2")
});
$("#lightblue").click(function() {
$("#demoDiv").removeClass("dark_blue border2")
$("#demoDiv").addClass("light_blue border1")
});
});
</script>
</body>
</html>
ご覧のとおり、メソッド removeClass と addClass に複数のクラス名を入れて、名前がスペースで区切られた 1つの文字列になっていることを確認します。
上記のコードは、2つの異なるクラスを置き換えることにより、div の背景色と境界線を変更します。 出力を参照してください。
attr() を使用して jQuery のクラスを置き換える
jQuery の attr メソッドは、HTML 要素の属性にアクセスして変更するために使用されます。 1つは属性、もう 1つは属性の名前または属性を置き換えるプロパティです。
これにより、指定された要素のすべてのクラスが新しいクラスに置き換えられます。 このメソッドの構文は次のとおりです。
$(selector).attr('class', 'newClassName');
上記の class は属性であり、newClassName は以前のクラスが置き換えられるクラス名になります。 例を試してみましょう。
<html lang="en">
<head>
<meta charset="utf-8">
<title> Attr in jQuery. </title>
<style>
.light_blue {
background-color: lightblue;
}
.dark_blue {
background-color: darkblue;
}
.border {
border: 5px solid green;
}
div {
width: 400px;
height: 400px;
border: 5px solid lightgreen;
}
button {
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div id="demoDiv" class="light_blue border"></div>
<button id="darkblue">Dark Blue</button>
<button id="lightblue">Light Blue</button>
<script>
$(document).ready(function() {
$("#darkblue").click(function() {
$("#demoDiv").attr("class", "dark_blue");
});
$("#lightblue").click(function() {
$("#demoDiv").attr("class", "light_blue");
});
});
</script>
</body>
</html>
上記のコードは attr メソッドを使用して、すべてのクラスを HTML 要素の新しいクラスに置き換えます。 出力を参照してください。
