JavaScript

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" 应该切换圆圈 class（来自 css）。

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

Answer 1

你的元素有多个class吗？如果是，也许这有帮助：

if(key === 69 && arr[i].className.indexOf("selected") > -1) {

Answer 2

用 indexOf() 更改此行有效：

if(key === 69 && arr[i].className.indexOf("selected")>-1)

Updated JS Fiddle

那是因为类名不等于selected，而是selected box center green size200。

Answer 3

因为 className 包含多个 classes，这不起作用：

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

因为 arr 在这一点上只包含个包含 "selected" class 的元素，你不需要那个检查。

但是，如果您出于其他原因需要它，您可以使用 classList.contains 代替：

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

Fiddle

Answer 4

我会为 has class 添加函数，这样您就不必担心是否有包含 selected 的 class 然后只需添加键码和有class().

这是 hasClass 的函数以及如何修改代码：

function hasClass(el, cls) {
  return el.className && new RegExp("(\s|^)" + cls + "(\s|$)").test(el.className);
}

然后只需将您的代码更改为：

if(key === 69 && hasClass(arr[i],"selected")) {
                box1.classList.toggle('circle');
            }

这是更新后的 fiddle JSFiddle

JavaScript - 在 keyDown 上切换 css 样式

JavaScript - Toggle css style on keyDown

keydown

Updated JS Fiddle