button().text
아무런 메뉴판이나 만들어보겠습니다.
<body>
<div id="menu">
<p><button id="btn1">메뉴닫기</button></p>
<ul class="list">
<li>닭갈비 : 1인분 13000원</li>
<li>삼겹살 : 1인분 15000원</li>
<li>항정살 : 1인분 16000원</li>
<li>닭목살 : 1인분 20000원</li>
<li>소등심 : 1인분 40000원</li>
</ul>
</div>
</body><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
</style>
<script>
$ (() => {
$(".list").css("color", "yellow").css("background-color", "blue");
이 메뉴판은 버튼을 누르면 생기고
한번 더 누르면 사라질 겁니다.
그리고 누를 때마다
'메뉴닫기' '메뉴열기'로
버튼의 text가 변경될 것 입니다.
$ (() => {
$(".list").css("color", "yellow").css("background-color", "blue");
// 특정태그의 여닫는 부분 사이의 text를 얻기 위해서
// $("요소지정").text()는 사이에 든 문자를 확인할 수 있습니다.
console.log($("#btn1").text());
$("#btn1").click(function(){
$(".list").toggle("fast");
if($("#btn1").text() === "메뉴열기" ){
$("#btn1").text("메뉴닫기");
}else{
$("#btn1").text("메뉴열기");
}
});
});$("요소지정").text()로 사이에 든 문자를 확인할 수 있습니다.
$("요소지정").text()에서 text()의 ()괄호 사이에
원하는 텍스트를 넣으면 텍스트를 바꿔줄 수도 있습니다.
일단은 여기까지 입니다.
배울 게 참 많네요.