클릭한 요소에 따른 클래스명 변경

Question

css를 해당클래스 이름에따라 스타일과 글자가가 변경이 되도록 하였는데요.아래 id : list1 클릭시 해당 클래스와 아래 list1_text 가 각각 list on , list1_text on 이 됨으로서 화면에 css및 텍스트가 선택1, list1_text 나타나도록 하였습니다,나머지는 off로 설정함으로 써 표시하지 않도록 하였느데요,아래 js코드 처럼 구현은 했는데 , 저런리스트가 많아질수록 코드 가독성이 우려되어 혹시 저 자바스크립트 부분을 좀더 가독성있게 짜고싶습니다. 조언 부탁드립니다html

선택1

선택2

list1_text

list1_text2

jsdocument.addEventListener("DOMContentLoaded", function() {document.getElementById("list1").onclick = function(){ document.getElementById("list1").className = "list on";document.getElementById("list2").className = "list off";document.getElementById("list1_text").className = "list1_text on";document.getElementById("list2_text").className = "list2_text off"; }document.getElementById("lilst2").onclick = function(){ document.getElementById("list1").className = "list off";document.getElementById("list2").className = "list on";document.getElementById("list1_text").className = "list1_text off";document.getElementById("list2_text").className = "list2_text on"; }});ex)list1 클릭시 list1클래스명이 list on 변경과 동시에 , 해당하는 list1_text가 나타남

냥냥가면 · Answer

손코딩이라 오타가 있을수 있어요!const list1 = document.querySelector("#list1");const list2 = document.querySelector("#list2");const text1 = document.querySelector("#list1_text");const text2 = document.querySelector("#list2_text");list1.onclick = () => { list1.className = "list on"; list2.className = "list off"; text1.className = "list1_text on"; text2.className = "list2_text off";}list2.onclick = () => { list1.className = "list off"; list2.className = "list on"; text1.className = "list1_text off"; text2.className = "list2_text on";}

클릭한 요소에 따른 클래스명 변경

1개의 답변

Q&A 목록