[포스코x코딩온] 웹개발자 풀스택 부트캠프8기
jquery를 활용한 버튼 클릭 시 이미지 전환
항상 발전하는 개발자
2023. 7. 14. 19:41
728x90
jquery를 활용한 이미지 전환
결과
버튼을 누르면 그 글자에 맞는 과일이 뜨게 만들었습니다.
코드
jquery를 사용할 예정이니 CDN을 연결해준다.
첫번째 방법
1. 먼저 버튼들을 만들어 줍니다.
<button onclick="changeApple()">사과</button>
<button onclick="changeBanana()">바나나</button>
<button onclick="changeGrape()">포도</button>
<button onclick="changePeach()">복숭아</button>2. 버튼에 클릭시 나타날 사진들을 다운로드 해서 파일을 업로드 해줍니다.
3. 이미지 태그를 만들어서 이미지들을 연결해준다.
<img
class="apple1"
src="/230714_jQuery/apple.jpg"
alt="apple"
style="display: none"
/>
<img
class="banana1"
src="/230714_jQuery/banana.jpg"
alt="banana"
style="display: none"
/>
<img
class="grape1"
src="/230714_jQuery/grape.jpg"
alt="grape"
style="display: none"
/>
<img
class="peach1"
src="/230714_jQuery/peach.jpg"
alt="pitch"
style="display: none"
/>style에서 display: none을 통해 초기 설정을 화면에 안보이게 만들어 둔다.
4. 버튼들이 클릭했을 때 사용될 함수들 설정
<script>
function changeApple() {
$(".apple1").attr("style", "display: inline");
$(".banana1").attr("style", "display: none");
$(".grape1").attr("style", "display: none");
$(".peach1").attr("style", "display: none");
}
function changeBanana() {
$(".banana1").attr("style", "display: inline");
$(".apple1").attr("style", "display: none");
$(".grape1").attr("style", "display: none");
$(".peach1").attr("style", "display: none");
}
function changeGrape() {
$(".grape1").attr("style", "display: inline");
$(".apple1").attr("style", "display: none");
$(".banana1").attr("style", "display: none");
$(".peach1").attr("style", "display: none");
}
function changePeach() {
$(".peach1").attr("style", "display: inline");
$(".apple1").attr("style", "display: none");
$(".banana1").attr("style", "display: none");
$(".grape1").attr("style", "display: none");
}
</script>클릭된 버튼에 관한 img만 보이게 하고 나머지는 none으로 설정하여 화면에 안나타나게 한다.
두번째 방법
1. onclick시 발생하는 함수에서 이름을 변수로 설정하면 코드가 간결해진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.7.0.js"
integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
crossorigin="anonymous"
></script>
<script>
function changeImg(name) {
$("img").attr("src", `${name}.jpg`);
}
</script>
</head>
<body>
<img width="100" height="100" />
<button onclick="changeImg('apple')">사과</button>
<button onclick="changeImg('banana')">바나나</button>
<button onclick="changeImg('grape')">포도</button>
<button onclick="changeImg('peach')">복숭아</button>
</body>
</html>코드 간결화를 위해 계속 고민하고 고민해야 한다...
첫번째 방법:
두번째 방법:
728x90