javascript - 在普通 javascript 中移动类为 ".something"的所有元素

Question

我设法让 div id = "box" 可以使用箭头键在浏览器中移动。现在我想让每个 div id = "box" 类 .something 也移动。

我尝试使用 querySelectorAll 遍历代码，但代码总是失败。 有人可以帮我吗？并告诉我该怎么做，因为现在我感到完全迷失了。下面的代码只适用于一个 div id

var box = document.getElementById("box");
document.addEventListener("keydown", function(event) {
var key = event.key;
var left = box.offsetLeft;
var top = box.offsetTop;

console.log("left: ", left);
console.log("top: ", top);


    box.style.top = (top - step) + "px";
    box.style.top = (top - step) + "px";
    box.style.top = (top - step) + "px";
    box.style.top = (top - step) + "px";
var step = 10;

switch (key) {
    case "ArrowUp":
        event.preventDefault();
        box.style.top = (top - step) + "px";
        break;
    case "ArrowDown":
        event.preventDefault();
        box.style.top = (top + step) + "px";
        break;
    case "ArrowLeft":
        box.style.left = (left - step) + "px";
        break;
    case "ArrowRight":
        box.style.left = (left + step) + "px";
        break;
}
console.log("You pressed on: ", key);

});

Answer 1

尝试修复它。 Repl 可以在这里找到:https://repl.it/@PaulThomas1/FrightenedAgileBrain

document.addEventListener("keydown", function(event) {
  var boxes = document.getElementsByClassName("box");
  var key = event.key;  

  for(var i = 0; i < boxes.length; i++) {
    var box = boxes[i];
    var left = box.offsetLeft;
    var top = box.offsetTop;    
    console.log("left: ", left);
    console.log("top: ", top);   

    var step = 10;

    switch (key) {
        case "ArrowUp":
            event.preventDefault();
            box.style.top = (top - step) + "px";
            break;
        case "ArrowDown":
            event.preventDefault();
            box.style.top = (top + step) + "px";
            break;
        case "ArrowLeft":
            box.style.left = (left - step) + "px";
            break;
        case "ArrowRight":
            box.style.left = (left + step) + "px";
            break;
    } 
    console.log("You pressed on: ", key);  
  }
});