HOWTO · jQuery
jQuery 대체 클래스
이 튜토리얼은 jQuery에서 클래스를 대체하는 방법을 보여줍니다.
이 튜토리얼은 jQuery에서 클래스를 대체하는 방법을 보여줍니다.
jQuery는 HTML 요소의 클래스를 대체하는 내장 메소드를 제공하지 않지만 클래스 대체 기능을 수행하는 데 사용할 수 있는 몇 가지 다른 메소드를 제공합니다. 이 자습서는 jQuery를 사용하여 클래스를 다른 클래스로 바꾸는 다양한 방법을 보여줍니다.
removeClass() 및 addClass()를 사용하여 jQuery에서 클래스 교체
removeClass() 함수는 jQuery의 요소에서 클래스를 제거하는 데 사용되며 addClass() 메서드는 HTML 요소에 클래스를 추가합니다. 이러한 클래스를 함께 구현하여 replaceClass 메서드를 생성할 수 있습니다.
removeClass() 메서드 구문:
$(Selector).removeClass(Class);
addClass() 메서드 구문:
$(Selector).addClass(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() 함수는 세 개의 매개변수를 사용합니다. 첫 번째는 요소의 id, 두 번째는 교체할 클래스, 세 번째는 주어진 클래스를 대체할 클래스입니다. 출력을 참조하십시오.
마찬가지로 여러 클래스를 교체하려는 경우 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 메서드에 여러 클래스 이름을 입력하여 이름이 공백으로 구분된 하나의 문자열에 있는지 확인합니다.
위의 코드는 두 개의 서로 다른 클래스를 대체하여 div의 배경색과 테두리를 변경합니다. 출력을 참조하십시오.
attr()을 사용하여 jQuery에서 클래스 바꾸기
jQuery의 attr 메서드는 HTML 요소의 속성에 액세스하고 변경하는 데 사용됩니다. 하나는 속성이고, 두 번째는 속성이 대체될 속성 이름 또는 속성입니다.
이것은 주어진 요소의 모든 클래스를 새 클래스로 대체합니다. 이 방법의 구문은 다음과 같습니다.
$(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 요소의 새 클래스로 바꿉니다. 출력을 참조하십시오.
