자바스크립트 childNode 관련 질문

Question

안녕하세요! input stepper 의 더하기 빼기 기능을 stepper가 여러개 일 때를 위해서 자바스크립트 코드를 연습하고있는데, 뭔가 생각만큼 잘안되서 질문 올립니다. 각각의 &#43; 와 - 버튼은 잘되는데 첫번째 stepper에서 &#43; 를 눌러서 3이되었을 때, 다른 stepper &#43; 나 -를 누르면 1에서 건너뛰고 3부터 시작해서요 ^^;; 자바스크립트 지식이 깊지 않아서 어떤식으로 접근해야되는지 혹시 알려주실 수 있으실까요? 그리고, 이런식으로 여러개의 같은기능을 만들고자할 때, forEach나 for loop을 사용하는 방법 이외에 다른 방법이 있는지 아니면 위의 두 방식으로 접근하는 것이 맞는지도 궁금합니다 ! 기능 먼저 하느라 아이콘은 &#43;를 아직 안넣었는데 ^^; - &#43; 기능은 되는것이 맞이요 ㅎㅎ감사합니다! const stepperWrap &#61; document.querySelectorAll('.stepper-wrap')let count &#61; 0for(let i&#61;0; i<stepperWrap.length; i&#43;&#43;){ const stepperNum &#61; stepperWrap[i].querySelector('.stepper-num') const stepperAdd &#61; stepperWrap[i].querySelector('.stepper-add') const stepperSubstract &#61; stepperWrap[i].querySelector('.stepper-substract') console.log(stepperNum) console.log(stepperAdd) console.log(stepperSubstract) stepperAdd.addEventListener('click', function(){ count&#43;&#43;; stepperNum.innerHTML &#61; count; // stepperSubstract.classList.remove('disabled') }) stepperSubstract.addEventListener('click', function(){ if(count <&#61; 2){ count &#61; 1 stepperSubstract.classList.add('disabled') } else{ count--; } stepperNum.innerHTML &#61; count; })}

yeori · Accepted Answer

각각의 stepper가 상태를 갖는 경우입니다.let count; 부분에서 각각의 stepper마다 하나씩 갖고 있어야 하는 상황입니다.아래와 같이 클래스를 하나 준비합니다. class Stepper { constructor(el, init=1) { this.el = el; this.size = init; installUI(this); installListeners(this); } } // 이렇게 쓰려고 함 new Stepper(el, 3);* el - document.querySelector(".wrapper")로 반환받는 element* init - stepper초기 값, 값이 없으면 1로...화면 내에 stepper가 여러개 있는 경우

아래와 같이 한꺼번에 묶어서 인스턴스를 생성합니다.class Stepper { ... } const els = document.querySelectorAll('.stepper-wrap') els.forEach(el => { new Stepper(el, 1); })* 모두 1부터 시작클래스 Stepper에서 isntallUI, installListener같은 메소드가 있는데 얘들은 주어진 element안에다 필요한 버튼 등을 집어넣고 이벤트 리스너를 달아줍니다.const installUI = (stepper) => { const {el, size} = stepper; el.innerHTML = `@size`.replace('@size', size); } const installListeners = (stepper) => { stepper.el.addEventListener('click', (e) => { const {cmd} = e.target.dataset // "inc" or "dec" if (cmd) { stepper[cmd](); } }) } class Stepper { constructor(...) { .... installUI(this); installListener(this); } }* 양 옆에 버튼, 가운데 텍스트로 간단히 구성* 버튼에 data-cmd 값을 묻어둠("inc", "dec").증가, 감소 버튼을 누르면 Stepper 클래스의 inc() 또는 dec()를 호출합니다.그래서 아래와 같이 Stepper 클래스에 두 메소드를 만들고..class Stepper { constructor(el, init=1) { .... } inc() { this.size = Math.min(5, this.size + 1); this.repaint(); } dec() { this.size = Math.max(1, this.size - 1); this.repaint(); } }* 최대 5, 최소 1 이상 못 넘게 구현해봄this.size가 각각의 stepper마다 갖는 상태값입니다.(let count;에 해당)마지막으로 stepper 그림 그려주는 repaint() 구현 추가class Stepper { constructor(el, init=1) { .... } inc() { .... this.repaint(); } dec() { ... this.repaint(); } repaint() { const span = this.el.querySelector('span'); span.innerText = '' + this.size; } } init, min, max같은 값도 div에 묻어둘 수 있겠죠.

요런 부분들도 Stepper 클래스 초기화할때 따내서 처리할 수도 있습니다.

yeori · Answer

Haileyang · Answer

&#64;yeori어머 ㅜㅜ 너무 감사합니다 ㅜㅜ Class 쓰는법이나 이런것들이 아직 생소해서 쓰다가도 돌아오게되는데 설명까지 자세히 써주셔서 이해도 잘되었어요 ㅜㅜ덕분에 새롭게 알아가는 것이 많은 것같아요 !!! init, min, max 설정까지 코드화로 표현하셔서 더 사용성좋은 stepper이 된 것같아서 너무 감탄했어요!! 시간내주셔서 알려주셔서 감사합니다!!

자바스크립트 childNode 관련 질문

3개의 답변

Q&A 목록