-
jquery를 활용한 버튼 클릭 시 이미지 전환[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 7. 14. 19:41728x90
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'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글
jQuery을 활용한 달력에서 선택한 날짜에 일정 추가하기 (0) 2023.07.14 JQuery를 활용한 색깔 변화 (0) 2023.07.14 [포스코x코딩온] JQuery의 기초 (0) 2023.07.14 [포스코x코딩온] 표준객체, 요소 다루기, 이벤트 (0) 2023.07.13 [포스코x코딩온] JavaScript - 문자열,배열 관련 메소드 / for, forOf, forEach문 (0) 2023.07.12