방금 ​​클릭하지 않고 클릭하지 않은 클래스를 어떻게 변경합니까?

Question

클릭하지 않고 클릭 한 클래스의 클래스를 변경하고 싶습니다.

내가 원하지 않는 것을 :

$('#buttonid').addClass('active')

내가 클릭되는 버튼의 맥락을 잡아 자동 버튼을 클릭 한에 관계없이, 그것에 클래스를 추가하고 싶습니다.

이상적으로 나는 각 버튼에 할당하는 onClick 함수가 있고 그 함수가있는 버튼에 대해서만 클래스를 변경하고 싶습니다. 같은

뭔가 :

의사 코드

onClick function() { 
    thisButton.addClass('active') 
} 

Answer 1

당신은 버튼을 포함하는 요소에 이벤트 리스너를 추가 할 수 있습니다. 핸들러 함수는 이벤트를 트리거 한 요소를 가리키는 target 적절성을 포함하는 click 이벤트를 수신합니다. e.target과 비교하여 필요한 요소가 있는지 확인할 수 있습니다. 스 니펫은 IE9 +입니다, 이전 버전의 브라우저에 대한 polyfills이 있습니다 :

var container = document.getElementById("container"); 
 

 
container.addEventListener('click', function(e) { 
 
    var target = e.target; 
 
    if (target.dataset.action == 'click') { 
 
    target.classList.toggle('clicked'); 
 
    } 
 
})

button.clicked { 
 
    background-color: gold; 
 
}

<div id="container"> 
 
    <button data-action="click">Click Me</button> 
 
    <button data-action="click">Click Me</button> 
 
    <button data-action="click">Click Me</button> 
 
    <button>Nothing Will Happen</button> 
 
    <button data-action="click">Click Me</button> 
 
    <button data-action="click">Click Me</button> 
 
</div>

주 (난 내 코드에서 dataset를 사용).

Answer 2

DOM 변경 사항을 확인해야합니다. 이 간단한 예제 MutationObserver() 객체를 사용

(참고 : 나는 '특정'버튼을 당신이 의미 한 것을 알 수 없습니다.)

var body = document.getElementsByTagName('body')[0]; 
var buttons = []; 




/** 
* When a button is clicked 
*/ 
function buttonClickEvent() { 
    this.className = this.className === 'active' ? '' : 'active'; 
} 



/** 
* Iterate each button in the 'buttons' {Array}. 
    * if callback returns false, the loop breaks. 
*/ 
function filterButtons(callback) { 
    for (var i = 0, btn; (btn = buttons[i++]) && (callback(btn) !== false);); 
} 



/** 
* Update buttons in certain collections. 
* @param {HTMLCollection, else ...} addedNodes 
* @param {HTMLCollection, else ...} removedNodes 
* @param {Boolean} ignoreBtnCheck 
*/ 
function updateButtons(addedNodes, removedNodes, ignoreBtnCheck) { 
    for (var i = 0, el; el = addedNodes[i++];) { 
     if (ignoreBtnCheck || el.tagName.toUpperCase() === 'BUTTON') { 
      var found = false; 

      filterButtons(function(btn) { 
       if (btn === el) { 
        found = true; 
        return false; 
       } 
      }); 

      if (!found) { 
       el.addEventListener('click', buttonClickEvent); 
       buttons.push(el); 
      } 
     } 
    } 

    for (i = 0; el = removedNodes[i++];) { 
     if (el.tagName.toUpperCase() === 'BUTTON') { 
      filterButtons(function(btn) { 
       if (btn === el) { 
        buttons.splice(i, 1); 
        return false; 
       } 
      }); 
     } 
    } 

} 




/** 
* Create a 'MutationObserver' to handle 
events like DOMInsertedNode, etc. 
*/ 
var observer = new MutationObserver(function(mutations, observer) { 
    if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) 
     updateButtons(mutations[0].addedNodes, mutations[0].removedNodes); 
}); 




/** 
* Observe DOM changes in 'body'. 
*/ 
observer.observe(body, { childList: true, subtree: true }); 




/** 
* Update at least once each button in 'body' 
*/ 
updateButtons(body.getElementsByTagName('button'), [], true); 

Answer 3

당신은 for..of 루프를 사용할 수 document.querySelectorAll()Element.addEventListener을 event.target 현재 참조하는 클릭 요소

.selected { 
 
    color: green; 
 
}

<button>click</button> 
 
<button>click</button> 
 
<button>click</button> 
 
<button>click</button> 
 
<script> 
 
    for (let button of document.querySelectorAll("button")) { 
 
    button.addEventListener("click", e => e.target.classList.add("selected")) 
 
    } 
 
</script>