Hinzufügen und Entfernen von Klassennamen mit Eventlistener

Question

Ich versuche, Eventlistener auf eine Schaltfläche

<button id="btn">click me</button> 

document.getElementById('btn').addEventListener('click', function (e) { 
test(e.target); 
}, false); 

und jedes Mal Klick ausgelöst gesetzt, das andere HTML-Element (.random ul) wird eine neue Klasse von my class erhalten oder entfernen (auf den zweiten Klick)

function test() { 
document.querySelector(".random ul").className = document.querySelector(".random ul").className += ' newclass' 
    ? '' //need to remove the newclass 
    : ''; //need to add the newclass 
} 

Dies funktioniert offensichtlich nicht. Ich fand auch das folgende Skript, um richtig zusätzliche Klassennamen zu entfernen:

document.getElementById("MyElement").className = 
    document.getElementById("MyElement").className.replace 
     (/(?:^|\s)MyClass(?!\S)/g , '') 
//from: http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript 

Ich weiß nicht wirklich, wie es funktioniert und möchten Sie bitten, mir dabei zu helfen, bitte.

Answer 1

Ich applaudiere Ihnen für die Verwendung von jQuery. Vor einiger Zeit habe ich selbst den Tauchgang gemacht.

function toggleClass (el, className) { 
 
    if (el.classList) { 
 
    el.classList.toggle(className); 
 
    } else { 
 
    if (el.className.match(new RegExp('(^|\\s)'+className+'(\\s|$)','g'))) { 
 
     el.className = el.className.replace(new RegExp('\\s?' + className), ''); 
 
    } 
 
    else { 
 
     el.className += ((el.className !== '') ? ' ' : '') + className; 
 
    } 
 
    } 
 
} 
 

 

 
document.getElementById('btn').addEventListener('click', function (e) { 
 
    toggleClass(document.querySelector('.random ul'), 'newclass'); 
 
}, false);

.newclass { color: red; }

<button id="btn">click me</button> 
 

 
<div class="random"> 
 
    <ul> 
 
    <li>Test</li> 
 
    </ul> 
 
</div>

Oh, und für mehr Vanilla-JS-Zeug, um durch http://youmightnotneedjquery.com/ oder meine persönlichen Experimente inspirierte https://github.com/fboes/js-toolshed/blob/master/src/js-toolshed.js

Answer 2

In allen modernen Browsern (IE 10+) Sie classList und seine toggle Methode verwenden:

document.getElementById('btn').addEventListener('click', function (e) { 
    test(e.target); // not sure why you need e.target? 
}, false); 

function test() { 
    document.querySelector('.random ul').classList.toggle('newclass'); 
} 

toggle funktioniert wie jQuery Toggle.