여러 개의 onclick 이벤트/요소를 결합하는 방법

Question

여러 개의 버튼이있는이 토글 기능이 있습니다.

var button1 = document.querySelector('#button1'); 
var button2 = document.querySelector('#button2'); 
var button3 = document.querySelector('#button3'); 

var toggleState = function (elem, one, two) { 
var elem = document.querySelector(elem); 
elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one); //ternary operator 
}; 

button1.onclick = function (e) { 
toggleState('#div1', 'open', 'closed'); 
e.preventDefault(); 
}; 

button2.onclick = function (e) { 
toggleState('#div2', 'open', 'closed'); 
e.preventDefault(); 
}; 

button3.onclick = function (e) { 
toggleState('#div3', 'open', 'closed'); 
e.preventDefault(); 
}; 

나는 이것이 매우 지연된 것처럼 보입니다. 변수를 결합하기 위해 querySelectorAll을 시도했지만 작동하지 않습니다. 나는 왜 그런지 알 것 같아. 그러나 나는 더 능숙하게 스크립트를 작성하는 방법을 이해할 수 없다. (능숙하게. 존경할만한 것이 더 나은 단어입니다)

변수와 onclicks를 어떻게 조합하여 코드가 중복/지연/우스운 것처럼 보이지 않게 할 수 있습니까?

저는 자바 스크립트를 올바르게 작성하는 법을 배우려고합니다. 너무 오랫동안 jQuery에 중독되었습니다 & 저는 실제로 자바 스크립트를 작성하는 방법을 모르겠다는 것을 깨달았습니다. 그래서 나는 배우려고 노력하고 있습니다.

Answer 1

다음과 유사한 해결책을 고려하십시오. 요소 당 이벤트 처리기를 복사하는 대신 루프의 각 요소를 처리 할 수 ​​있습니다.

요소 ID가 일관되면, 토글 수를 지정하고 ID를 생성하는 것만으로 간단하게 만들 수 있습니다. 당신은 button 요소를 얻고 그들을 위해 onclick 이벤트를 트리거 할 필요가

:

var toggles = { 
    '#button1': '#div1', 
    '#button2': '#div2', 
    '#button3': '#div3' 
}; 

Object.keys(toggles).forEach(function(toggle) { 
    document.querySelector(toggle).onclick = function (e) { 
     toggleState(toggles[toggle], 'open', 'closed'); 
     e.preventDefault(); 
    }; 
}); 

function toggleState(elem, one, two) { 
    var elem = document.querySelector(elem); 
    elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one); 
}; 

Answer 2

여기에 하나 개의 솔루션입니다.

각 단추 당 onclick 이벤트 처리기 대신 루프를 사용할 수 있습니다. 와

더 읽기에 대한 bind function

var buttons=document.getElementsByTagName('button'); 
var toggleState = function (elem, one, two) { 
    var elem = document.querySelector(elem); 
    elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one); //ternary operator 
}; 
for(var i=0;i<buttons.length;i++){ 
    var button=document.querySelector('#button'+(i+1)); 
    button.onclick=(function(index){; 
     toggleState('#div'+index,'open','closed'); 
    }).bind(this,i+1);  
}