클릭한 클래스에 따라 클래스명을 간단하게 처리하는방법 질문드립니다.

Question

해당 요소를 클릭한경우 , 해당클래스 이름에따라 스타일과 글자가가 변경이 되도록 하였는데요현재 아래에 이렇게 작성해서 구현하긴했는데, 요소가 많아질수록 코드가 지저분해질거 같더라구요, 이 자바스크립트 부분만 가독성있게 작성하려고 하는데 조언부탁드립니다 ㅠdocument.addEventListener(&#34;DOMContentLoaded&#34;, function() { document.getElementById(&#34;apple&#34;).onclick &#61; function() { document.getElementById(&#34;apple&#34;).className &#61; &#34;apple_on&#34;; document.getElementById(&#34;banana&#34;).className &#61; &#34;banana&#34;; document.getElementById(&#34;appleText&#34;).className &#61; &#34;appleText_on&#34;; document.getElementById(&#34;bananaText&#34;).className &#61; &#34;bananaText&#34;; } document.getElementById(&#34;banana&#34;).onclick &#61; function() { document.getElementById(&#34;banana&#34;).className &#61; &#34;banana_on&#34;; document.getElementById(&#34;apple&#34;).className &#61; &#34;apple&#34;; document.getElementById(&#34;bananaText&#34;).className &#61; &#34;bananaText_on&#34;; document.getElementById(&#34;appleText&#34;).className &#61; &#34;appleText&#34;; } });ex) 사과 클릭시, 기존 스타일,텍스트 -> 사과로 변경바나나 클릭시 , 기존 사과에서 -> 스타일,텍스트 바나나 변경

메로나한입만 · Answer

기본 텍스트

apple banana

간단하게 만들어 봤는데 이벤트 위임해서 처리하는게 제일 좋아보입니다!그리고 요소 검색할 때 querySelector로 통일해서 사용하는게 더 가독성이 좋을 거에요!

클릭한 클래스에 따라 클래스명을 간단하게 처리하는방법 질문드립니다.

1개의 답변

Q&A 목록