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。 / p>

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()的{{1}}中使用相同的结果，也可以在循环本身中使用for loop代替let，但对于初学者来说，可以使用相同的结果。更好地是简单地创建自包含的eventHandler。

由于有很多可用的资源，我建议您谷歌搜索“ for循环事件监听器”。

在带有getElementByTagName（）的对象上添加'mouseover'和'mouseout'事件监听器，仅将事件应用于最后一项

3 个答案: