使用 Java 脚本按照用户将鼠标悬停在它们上面的顺序打印消失的悬停数字

Question

我制作了这个网页，其中随机数字从 1 到 9 出现在正方形 div 中。

我需要的是：当用户将鼠标悬停在任何数字上时，该数字将消失，最后当用户完成所有数字的悬停时，应出现一个警告，按照用户悬停的顺序显示所有数字。

这是我的尝试：我只能让数字消失，但我怎样才能按照用户悬停的相同顺序在警报中打印它们：

document.getElementById("s1").addEventListener("mouseover", function(){
document.getElementById("s1").style.visibility = "hidden";})
document.getElementById("s2").addEventListener("mouseover", function(){
document.getElementById("s2").style.visibility = "hidden"; })
document.getElementById("s2").addEventListener("mouseover", function(){
document.getElementById("s2").style.visibility = "hidden"; })
document.getElementById("s3").addEventListener("mouseover", function(){
document.getElementById("s3").style.visibility = "hidden";})
document.getElementById("s4").addEventListener("mouseover", function(){
document.getElementById("s4").style.visibility = "hidden";})
document.getElementById("s5").addEventListener("mouseover", function(){
document.getElementById("s5").style.visibility = "hidden";})
document.getElementById("s6").addEventListener("mouseover", function(){
document.getElementById("s6").style.visibility = "hidden";})
document.getElementById("s7").addEventListener("mouseover", function(){
document.getElementById("s7").style.visibility = "hidden";})
document.getElementById("s8").addEventListener("mouseover", function(){
document.getElementById("s8").style.visibility = "hidden";})
document.getElementById("s9").addEventListener("mouseover", function(){
document.getElementById("s9").style.visibility = "hidden";})
function alertAfterHovering() {
alert(document.getElementById("s1").innerHTML+" "+document.getElementById("s2").innerHTML+" 
"+document.getElementById("s3").innerHTML+" "+document.getElementById("s4").innerHTML+" 
"+document.getElementById("s5").innerHTML+" "+document.getElementById("s6").innerHTML+" 
"+document.getElementById("s7").innerHTML+" "+document.getElementById("s8").innerHTML+" 
"+document.getElementById("s9").innerHTML)
 }

Answer 1

创建一个数组来捕获用户悬停时的数字。然后使用该数组显示警报。

var numbers = [];
// repeat this for each element Or find a better way of targeting the elements so you don't have to hard code for each one
document.getElementById("s1").addEventListener("mouseover", function(){
    var thisNumber = document.getElementById("s1").innerHTML;
    // you need some way of making sure hovering over an invisible element does not add a duplicate to the array
    if (!numbers.includes(thisNumber) {
        numbers.push(thisNumber);  
    }
    document.getElementById("s1").style.visibility = "hidden";
});

function alertAfterHovering() {
    alert(numbers);
}

Answer 2

您可以使用 eventListener 和一些动态代码来完成：

var squares = document.getElementsByClassName("square");

for (square of squares) {
  square.addEventListener("mouseenter", addNumber);
}

var total = [];

function addNumber(e) {
  if(e.target.textContent) {
    total.push(e.target.textContent);
    e.target.textContent = "";
    if(total.length === squares.length) {
      alert(total);
    }
  }
}

.square {
  width: 29%;
  height: 50px;
  background: #00ffff;
  margin: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  display: flex;
  flex: 0 1 33%;
  flex-wrap: wrap;
}

<div class="box">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
  <div class="square">4</div>
  <div class="square">5</div>
  <div class="square">6</div>
  <div class="square">7</div>
  <div class="square">8</div>
  <div class="square">9</div>
</div>

使用 Java 脚本按照用户将鼠标悬停在它们上面的顺序打印消失的悬停数字

Print the disappeared hovered numbers in the order that the user mouseover them using Java Script

javascript

css

mouseover