Question

需要一些帮助来弄清楚我的第二个功能有什么问题。 JS在这里： 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）。 / p>

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

Answer 1

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

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

由于此时arr包含仅包含类的元素，因此您无需进行此项检查。

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

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

Fiddle

Answer 2

您的元素是否包含多个类？如果是，也许这会有所帮助：

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

Answer 3

使用indexOf()更改此行有效：

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

Updated JS Fiddle

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

Answer 4

我会为has class添加函数，你不必担心如果你有一个包含selected的类，然后只需添加key代码和hasclass（）的组合。

这里是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');
            }

这是更新的小提琴JSFiddle

JavaScript - 在keyDown上切换css样式

4 个答案:

Updated JS Fiddle