4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
안녕하세요 category_list(전체/20~30대/40대/50대) 를 누르면 안에 내용물 순서를 바꾸는 코드를 작성중입니다 . 해당 카테고리를 누르면 javascript로 내용물을 수정해주려고 하는데 카테고리를 누르면 안에 내용물을 다 비우고 새롭게 html 을 만드려는데 그 이후로 category_list 의 클릭이 동작하지 않습니다 . 안에 html을 재정립해서 그런걸까요 ? console.log(1) 출력 결과 전체버튼을 계속 누르면 1이 출력되어야 하는데 처음 한번만 작동하고 작동하지 않습니다 ( 1이 한번만 출력된다는 말) 제 말이 잘 전달되었는지 모르겠네요 ㅠㅠ
document.querySelectorAll(".category_list")[0].addEventListener("click", () => { document.querySelectorAll(".sec_range")[0].innerHTML = "";var 템플릿 = `<div class="sec1_content"> <div class="model1"> <div class="model1_image"> < img src="./images/MODEL1.png" alt="top1" /> </div> <div class="model1_range"> <span>1위</span> </div> </div> <div class="sec1_content_right"> <div class="right_category"> <span class="category_list">전체</span> <span class="category_list">2~30대</span> <span class="category_list">40대</span> <span class="category_list">50대</span> </div> <h2>1위. RAV4 Hybrid</h2> <div class="another_model"> <div class="model2"> < img src="./images/model2.png" alt="model2" /> <h2>2위. SIENNA</h2> </div> <div class="model3"> < img src="./images/model3_11.png" alt="model3" /> <h2>3위. CAMRY hybrid</h2> </div> </div> </div> </div>`;
document .querySelectorAll(".sec_range")[0] .insertAdjacentHTML("beforeend", 템플릿); document.querySelectorAll(".category_list")[0].classList.add("on"); });document.querySelectorAll(".category_list")[1].addEventListener("click", () => { document.querySelectorAll(".sec_range")[0].innerHTML = "";var 템플릿 = `<div class="sec1_content"> <div class="model1"> <div class="model1_image"> < img src="./images/MODEL1.png" alt="top1" /> </div> <div class="model1_range"> <span>1위</span> </div> </div> <div class="sec1_content_right"> <div class="right_category"> <span class="category_list">전체</span> <span class="category_list">2~30대</span> <span class="category_list">40대</span> <span class="category_list">50대</span> </div> <h2>1위. RAV4 Hybrid</h2> <div class="another_model"> <div class="model2"> < img src="./images/model2.png" alt="model2" /> <h2>2위. SIENNA</h2> </div> <div class="model3"> < img src="./images/model3_11.png" alt="model3" /> <h2>3위. CAMRY hybrid</h2> </div> </div> </div> </div>`;
document .querySelectorAll(".sec_range")[0] .insertAdjacentHTML("beforeend", 템플릿); document.querySelectorAll(".category_list")[1].classList.add("on"); }); 전체버튼과 20~30대 버튼 두개만 구현해 보았습니다. 버튼을 누르면 안에 html 을 비워주고 on 클래스 ( 색깔이 빨개지는) 를 부착하는 코드인데 버튼이 한번만 작동합니다.. ex ) 전체버튼에서 20대 버튼을 누르면 20버튼으로 on이 부탁되지만 그 이후로 전체버튼이든 20대버튼이든 on클래스가 부착되지 않음
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.