Wie ändere ich die Klasse einer Schaltfläche, auf die ich gerade geklickt habe, ohne spezifisch zu sein?

Question

Ich möchte die Klasse einer Schaltfläche ändern, die angeklickt wird, ohne spezifisch zu sein.

Nicht das, was ich will:

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

ich den Kontext der Schaltfläche geklickt wird, greifen will und automatisch eine Klasse, um es hinzuzufügen, unabhängig davon, welche Schaltfläche geklickt wurde.

Idealerweise hätte ich gerne eine Situation, in der ich eine onClick-Funktion habe, die ich jeder Schaltfläche zuweiße, und die Klasse (unter anderem) nur für die Schaltflächen ändert, die diese Funktion haben.

So etwas wie: mit den Schaltflächen,

Pseudocode

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

Answer 1

Sie können den Ereignis-Listener auf das Element hinzufügen. Die Handler-Funktion empfängt das Klick-Ereignis, das eine target-Eigenschaft enthält, die auf das Element zeigt, das das Ereignis ausgelöst hat. Sie können e.target vergleichen, um sicherzustellen, dass Sie das gewünschte Element haben. (I verwendet dataset in meinem Snippet)

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>

Hinweis: Das Snippet ist für IE9 + gibt es polyfills für ältere Browser.

Answer 2

Sie müssen die DOM-Änderungen beobachten. Dieses kurze Beispiel verwendet MutationObserver() Objekt:

(Anmerkung: Ich weiß nicht, was ‚spezifischen‘ Tasten Sie gemeint haben.)

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

Sie for..of Schleife verwenden können, document.querySelectorAll()Element.addEventListener, event.target Strom referenzieren klickte Element

.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>