添加'mouseover'和'mouseout'事件使用getElementsByTagName（）的事件监听器仅将事件应用于最后一项

Question

大家。我目前正在尝试制作15件幻灯片拼图。标准是当我将鼠标悬停在我的幻灯片拼图中时，它应该将该块上的边框设置为红色，当我将鼠标移开时，边框应该返回黑色。问题是mouseover和mouseout事件似乎只适用于通过for循环传递的最后一项，而我在解决问题时遇到了麻烦。

我尝试了很多不同的方法，包括用其他代码组合编写eventListeners，但没有得到成功的结果。这实际上是我得到的最接近的。

以下是有问题的具体代码：

function movePiece(){
    var elements = document.getElementById("puzzlearea").getElementsByTagName('div');

    for(var i=0; i<elements.length; i++){

        var item = elements.item(i);

        elements[i].addEventListener('mouseover', function(e){
            item.style.border = "5px solid red";
        },false);

        elements[i].addEventListener('mouseout', function(e){
            console.log(item);
            item.style.border = "5px solid black";
        },false);
    }
}

和它一起使用的HTML（我想注意这是一个类的对齐，所以不幸的是不允许更改这个HTML）：

        <div id="puzzlearea">
            <!-- the following are the actual fifteen puzzle pieces -->
            <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
            <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>
            <div>9</div>  <div>10</div> <div>11</div> <div>12</div>
            <div>13</div> <div>14</div> <div>15</div>
        </div>

这里有一些代码显示了我如何创建拼图，然后在按下随机按钮后将其随机播放：

window.onload = onPageLoad;

/*
 * Loads the page with the initial puzzle, and operates all game logic.
 */
function onPageLoad() {
  createPuzzle();
  document.getElementById("shufflebutton").onclick = makeShuffle;
}

function playGame() {
    movePiece();
}

/*
 * Creates the initial puzzle. We go through each div in the puzzlearea
 * and set the position of the tile, as well as the image. This puzzle is
 * created in the correct, or completed, order.
 */
function createPuzzle() {
  var puzzlePiece = document.getElementById("puzzlearea").getElementsByTagName('div');
  for(let i = 0; i < puzzlePiece.length; i++) {
    var item =  puzzlePiece.item(i);
    item.style.left = getLeftPosition(i);
    item.style.top = getTopPosition(i);
    item.style.backgroundPosition = getBackgroundPosition(i);
  }
}

/*
 * Shuffles the puzzle board. We go through each div in the puzzlearea
 * and set the position of the tile, as well as the image, based on the
 * shuffled order.
 */
function makeShuffle() {
  var puzzlePiece = document.getElementById("puzzlearea").getElementsByTagName('div');
  // Array of 0-14 in random order.
  var order = shuffleBoard();
  for(let i = 0; i < puzzlePiece.length; i++) {
    var loc = order[i];
    var item =  puzzlePiece.item(i);
    item.style.position = "absolute";
    item.style.left = getLeftPosition(loc);
    item.style.top = getTopPosition(loc);
    item.style.backgroundPosition = getBackgroundPosition(i);
  }
    playGame();
}

并且，如果需要，一些相关的CSS：

#puzzlearea {
  width: 400px;
  height: 400px;
  font-size: 40pt;
  color: white;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#puzzlearea div {
  background-image: url('background.jpg');
  width: 90px;
  height: 90px;
  border: 5px solid black;
  float: left;
  cursor: default;
}

我感谢任何和所有的帮助！

Answer 1

您根本不需要javascript事件，只需使用新的CSS选择器

#puzzlearea div:hover {
  border-color: red;
}

这是一个包含大部分代码的演示

#puzzlearea {
  width: 400px;
  height: 400px;
  font-size: 40pt;
  color: white;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#puzzlearea div {
  background-image: url('background.jpg');
  width: 90px;
  height: 90px;
  border: 5px solid black;
  float: left;
  cursor: default;
}

#puzzlearea div:hover {
  border-color: red;
}

#puzzlearea div.state-1:hover {
  border-color: green;
}

#puzzlearea div.state-2:hover {
  border-color: purple;
}

<div id="puzzlearea">
    <!-- the following are the actual fifteen puzzle pieces -->
    <div class="state-1">1</div>  <div class="state-2">2</div>  <div>3</div>  <div>4</div>
    <div class="state-1">5</div>  <div class="state-2">6</div>  <div>7</div>  <div>8</div>
    <div>9</div>  <div>10</div> <div>11</div> <div>12</div>
    <div>13</div> <div>14</div> <div>15</div>
</div>

Answer 2

你可以在你的CSS中添加一个悬停选择器

border: 5px solid black;

:hover {
    border: 5px solid red;
}

Answer 3

正如其他人所提到的，你可以用CSS轻松实现这一点。但由于这只是更大行动计划中的一个步骤，因此您的功能应该通过将item.style.border更改为e.target.style.border来实现。

这是因为在应用事件监听器时，循环已完成，并且eventHandler函数（附加到每个元素）将item作为for loop中的最后一项引用。

function movePiece(){
    var elements = document.getElementById("puzzlearea").getElementsByTagName('div');

    for(var i=0; i<elements.length; i++) {

        elements[i].addEventListener('mouseover', function(e){
            e.target.style.border = "5px solid red";
        },false);

        elements[i].addEventListener('mouseout', function(e){
            console.log(e.target);
            e.target.style.border = "5px solid black";
        },false);
    }
};

同样的结果可以与forEach()的for loop insead一起使用，或者在循环本身中使用let而不是var，但对于初学者来说，最好简单地创建自包含的eventHandler。

我建议谷歌搜索'for loop eventlistener'，因为有很多资源可用。