728x90
반응형
toggleClass()
새로운 클래스를 추가하거나 제거하여 특정 요소에 스타일을 추가하거나 제거할 수 있다.
<body>
<body>
<button id="btn">이미지 on/ off</button>
<br>
<img alt="img01" src="resources/image/img01.jpg" title="이미지 1번"/>
<img alt="img02" src="resources/image/img02.jpg" title="이미지 2번"/>
<img alt="img03" src="resources/image/img03.jpg" title="이미지 3번"/>
</body>
<script>
hasClass(class명)를 사용하는 방법을 toggleClass로 간단하게 구현할 수 있다.
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("img").click(function(){
// if($(this).hasClass("addsize")){
// $(this).removeClass("addsize").attr("title", "이미지축소");
// } else {
// $(this).addClass("addsize").attr("title","이미지확대");
// }
$(this).toggleClass("addsize");
});
$("#btn").click(function(){
$("img").toggleClass("onoffimg");
});
});
</script>
728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]내부삽입 (0) | 2020.08.03 |
|---|---|
| [JQ]replaceWith/replaceAll (0) | 2020.08.03 |
| [JQ]toggleClass (0) | 2020.08.03 |
| [JQ]effect_03 (0) | 2020.08.03 |
| [JQ]effect_02 (0) | 2020.08.03 |
