添加和使用事件偵聽

Question

我想事件偵聽設置按鈕

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

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

而每一次點擊移除類名被觸發，其他HTML元素（.random ul）將獲得一個新類的my class或刪除它（在第二次點擊）

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

這顯然不工作。我還發現了下面的腳本正常刪除的附加類名：

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 

我真的不知道如何使它工作，想請你幫我一下吧，請。

Answer 1

我讚賞你不使用jQuery。前一段時間我自己潛水。該腳本可以解決你的問題，即使是非常老的瀏覽器：

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>

哦，還有更多的香草-JS-的東西，得到由http://youmightnotneedjquery.com/或我個人的實驗，在https://github.com/fboes/js-toolshed/blob/master/src/js-toolshed.js

Answer 2

在所有現代瀏覽器（IE 10），你可以使用classList及其toggle方法：

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作品像jQuery的切換。