JavaScript - 在 keyDown 上切换 css 样式

Question

需要一些帮助来找出我的第二个函数出了什么问题。 JSfiddle在这里: JSfiddle

//add an outline on click
function addOutline(){
    box1.classList.toggle('selected');
}
box1.addEventListener('click', addOutline, false);


//change shape on element with class "selected" when "e" is pressed
function changeShape (event) {
    var arr = document.getElementsByClassName("selected");
    var key = event.keyCode;
        for(var i = 0; i < arr.length; i++) {
            if(key === 69 && arr[i].className === "selected") {
                box1.classList.toggle('circle');
            }   
        }
}
document.addEventListener("keydown", changeShape, false);

基本上我想做的是，当按下“e”键并且如果元素 className 等于“selected”时，div“box”应该切换圆形类(来自 css)。

我让它只与 keyDown 一起工作，但是当尝试将 className 语句添加到函数时，它不起作用。检查顶部的 jsfiddle 以更好地理解这一点。有什么想法吗？

Answer 1

因为 className 包含多个类，所以这不起作用:

arr[i].className === "selected"

由于此时 arr 仅包含包含“selected”类的元素，因此您不需要进行该检查。

但是，如果您出于其他原因需要它，则可以使用 classList.contains相反:

arr[i].classList.contains("selected")

Fiddle