2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
글쓴이글
-
2023년 12월 26일 21:11 #107888
남지윤참가자안녕하세요 선생님 <html> <section id="section_menu"> <div class="section_inner"> <h1>SELETO MENU</h1> <nav class="section_selection"> <button id="btn_signature">SIGNATRE</button> <button id="btn_beverage">BEVERAGE</button> <button id="btn_coffee">COFFEE</button> <button id="btn_cookie">COOKIE</button> </nav> <article class="section_selected_menu"> <div class="selected_menu_img"> <picture> <source media="(max-width:1024px)" srcset="./images/menu_signature_tablet.png" > < img src="./images/menu_signature.png" alt="시그니처 메뉴 이미지"> </picture> </div> 여기서 각 버튼 클릭시 <div class="selected_menu_img"> <picture> <source media="(max-width:1024px)" srcset="./images/menu_signature_tablet.png" > < img src="./images/menu_signature.png" alt="시그니처 메뉴 이미지"> </picture> </div> 이부분 이미지가 플립되는 효과를 적용시켜주려 하고있습니다.. <css>
.selected_menu_img { max-width: 50%; perspective: 1000px; transition: transform 0.5s ease; }.selected_menu_img picture { transition: transform 0.5s ease; }.selected_menu_img img{ max-width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }.flip { transform: rotateY(180deg); } <js>$(document).ready(function () { let menuData; let button = $("#btn_signature"); button.focus();$.getJSON('https://raw.githubusercontent.com/JiyunNam0/frontend/main/selecto/data1.json').done(function(data) { menuData = data; }).fail(function() { console.log('실패함') })$("#btn_signature").on("click", function() { updateSelectMenu("SIGNATURE"); $(".selected_menu_img").toggleClass("flip"); })$("#btn_beverage").on("click", function() { updateSelectMenu("BEVERAGE"); $(".selected_menu_img").toggleClass("flip"); })$("#btn_coffee").on("click", function(){ updateSelectMenu("COFFEE"); $(".selected_menu_img").toggleClass("flip"); })$("#btn_cookie").on("click", function() { updateSelectMenu("COOKIE"); $(".selected_menu_img").toggleClass("flip"); }) function updateSelectMenu(buttonId) { let selectedMenu = $(".section_selected_menu"); let data = menuData.find(item => item.title === buttonId); if(data) { selectedMenu.html(` <div class="selected_menu_img"> <picture> <source media="(max-width:1024px)" srcset="./images/menu_signature_tablet.png" > < img src="${data.images[0]}" alt="시그니처 메뉴 이미지"> </picture> </div> <div class="selected_menu_explain"> <h3>${data.title}</h3> <p>${data.content}</p> <div class="selected_category_item"> <p>< img src="${data.images[1]}" alt="시그니처 음료 첫번째" ></p> <p>< img src="${data.images[2]}" alt="시그니처 음료 첫번째" ></p> <p>< img src="${data.images[3]}" alt="시그니처 음료 첫번째" ></p> </div> <div class="selected_category_recomm"> <h4>추천 토핑류</h4> <ul class="category_recomm"> ${data.topping.map((a, i) => `< img src="${a}" alt="시럽"> <p>${data.toppingname[i]}</p>`));
} } }) 이렇게 각각 클릭이벤트로 .flip 클래스를 클릭시 붙혀주게 했으나 효과가 안먹더라구요ㅠㅠ.. 수동으로 제가 <div class="selected_menu_img"> 여기옆에 <div class="selected_menu_img flip"> 을 붙혀도 안먹고 css를 변경해서
.selected_menu_img.flip img{ max-width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; transform: rotateY(180deg); }이렇게 .flip을 수동으로 땟다 붙히면 효과가 보이긴 하더라구요 클릭이벤트에서 클래스를 붙혓는데 왜 적용이 안먹히는지 잘 안풀려서 여쭤봅니다 ㅠㅠ
2023년 12월 27일 09:31 #107933
codingapple키 마스터개발자도구에서 해당요소 찾아서 flip 클래스명은 붙는지 아니면 어떤 css가 먼저 적용되는지 확인해봅시다
-
글쓴이글
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.