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 요소의 새 클래스로 바꿉니다. 출력을 참조하십시오.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook