반응형
자바스크립트(JavaScript), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법입니다.
1. 클릭 이벤트를 캡쳐합니다.
2. 클릭한 객체로 children를 이용하여 이미지 노드를 찾아갑니다.
3. 현재 이미지 속성값을 확인하여 해당 속성과 반대되는 속성으로 바꿔줍니다.
아래 소스를 보시는 바와 같이 굳이 folder_down.png/folder_up.png 를 다 쓰실 필요없이 바뀌어야 하는 부분만 바꾸게 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>화살표 이미지를 토글시켜 준다.</h1>
<div class="area-desc">
<span><img src="./img/folder_down.png"></span>
</div>
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script>
$(".area-desc").click(function() {
var arrowImage = $(this).children("span").children("img");
arrowImage.attr("src", function(index, attr){
if (attr.match('up')) {
return attr.replace("up", "down");
}
else {
return attr.replace("down", "up");
}
});
});
</script>
</body>
</html>
2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산
2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate
반응형