HOWTO · jQuery
jQuery로 텍스트 전환
jQuery로 텍스트를 토글하려면 text() 메서드를 사용하거나 텍스트를 토글하는 사용자 지정 함수로 jQuery 라이브러리를 확장할 수 있습니다. 이 문서에서는 코드 예제와 함께 두 가지 방법을 모두 사용하는 방법을 설명합니다.
jQuery로 텍스트를 토글하려면 .text() 메서드를 사용하거나 텍스트를 토글하는 사용자 정의 함수로 jQuery 라이브러리를 확장할 수 있습니다. 이 문서에서는 코드 예제와 함께 두 가지 방법을 모두 사용하는 방법을 설명합니다.
.text() 메서드를 사용하여 jQuery로 텍스트 전환
jQuery .text() 메서드는 선택한 요소의 텍스트 콘텐츠를 변경할 수 있습니다. 이 지식을 사용하여 내용에 따라 텍스트를 바꾸는 조건문을 설정할 수 있습니다.
삼항 연산자를 사용하여 일을 단순하고 한 줄로 유지할 수도 있습니다. 이제 다음에는 Reveal Answer 텍스트가 있는 앵커 태그가 있습니다.
이 텍스트를 클릭하면 Reveal Answer를 Hypertext Markup Language로 변경하는 클릭 이벤트가 발생합니다. 두 번째 클릭은 텍스트를 Reveal Answer로 되돌립니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-toggle-text</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
p {
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<main>
<p>What is HTML? <a id="anchor-link" href="#">Reveal Answer</a></p>
</main>
<script>
$(document).ready(function() {
$("#anchor-link").click(function () {
let text = $("#anchor-link").text();
$("#anchor-link").text(
text == "Reveal Answer" ? "Hypertext Markup Language" : "Reveal Answer");
});
});
</script>
</body>
</html>
출력:
사용자 지정 함수를 사용하여 jQuery를 확장하여 텍스트 전환
jQuery 라이브러리를 확장하는 사용자 정의 함수를 작성할 수 있습니다. 이 함수는 두 개의 인수를 사용합니다. 첫 번째는 요소의 초기 텍스트이고 두 번째는 교체하려는 텍스트입니다.
첫 번째 예와 마찬가지로 삼항 연산자를 사용하여 코드를 깔끔하게 한 줄로 유지합니다. 이제 HTML에서 텍스트가 있는 HTML 버튼을 찾을 수 있습니다. 클릭하면 다른 텍스트로 바뀝니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-toggle-text</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
width: 50%;
margin: 2em auto;
}
button {
font-size: 2em;
}
</style>
</head>
<body>
<main>
<button class="btn-to-change">Click to change me</button>
</main>
<script>
$(document).ready(function() {
$.fn.extend({
toggle_text: function (initial_text, alternate_text) {
return this.text(this.text() == alternate_text ? initial_text : alternate_text);
}
});
$(".btn-to-change").click(function() {
$(".btn-to-change").toggle_text("Click to change me", "Hello there!");
});
});
</script>
</body>
</html>
출력:
