冲突 javascript 或鼠标悬停事件过多？

Question

目前，我在一张背景图片上叠加了 4 张图片。当您的鼠标悬停在每个图像上时，它会消失，直到用户刷新。我想创建一个图像的 26 个克隆。理想情况下，我可以定位每个图像副本，并且 jquery 会自动生成 id 名称，例如 (#myid(n)) a.k.a #myid1, #myid2。由于到目前为止我无法取消此图像克隆，因此我不得不一遍又一遍地复制和粘贴每个代码块。然而，一旦我添加了第六张图片，我就遇到了性能问题，我的代码停止工作。

我已经包含了两个代码笔。此代码笔适用于 4 个图像副本：https://codepen.io/narutofan389/collab/NWGpQWo

此代码笔不适用于 6 个副本：https://codepen.io/narutofan389/collab/MWapQyO

我听说过多的鼠标悬停事件会导致性能问题。我不确定这是否是我问题的根源。我也在尝试使用单独的 codepen 来测试具有单独 ID 的图像克隆。这是到目前为止从另一个堆栈溢出答案中获取的代码：

html

<body>
<div id="sand"></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascript

$(document).ready(function(){

      for (var i = 0; i < 2; i++) {  
          var img = "<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png' 
          id='myid"+i+"'/>"; 
          $("body #sand").append(img);
      }

})

我再次尝试生成不同的 ID，我可以单独定位？

Answer 1

由于您的克隆片段在 jQuery 中，我希望使用它的解决方案是可以接受的。

首先，我必须添加您的标记中缺少的 #sand 容器，因为它是代码附加图像的地方。还为每个图像添加了一个 div 包装器以镜像您的代码笔（尽管您可能不需要它），并向图像添加了一个 sand class。

然后，我没有为每个元素添加一个事件，而是使用 Event delegation so I can attach just one handler to the wrapping element. I'm targeting all images inside the #sand container that are not already hidden。

然后稍微简化了 css，删除了冗余规则并将通用属性移至新的 classes。

for (let i = 1; i <= 6; i++) {
  // Create the wrapping div
  var $container = $("<div class='sand" + i + "'>");
  // Create the img
  var $img = $("<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png' class='sand' id='sand" + i + "'/>");
  // Add image to container
  $container.append($img);
  // Add container to the document
  $("body #sand").append($container);
}

// Listen when the mouse hovers an image
$('#sand').on('mouseenter', 'img.sand:not(.hide)', function() {
  $(this).addClass('hide');
});

$('#sand').on('animationend', 'img.sand.hide', function() {
  $(this).hide();
});

html {
  background: url(https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}

#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.sand {
  position: absolute;
  height: 90vh;
}

#sand6 {
  top: 0px;
  right: 200px;
}

#sand5 {
  top: 300px;
  left: 500px;
}

#sand4 {
  top: 300px;
  right: 200px;
}

.hide {
  animation: fade 3s;
  animation-fill-mode: forwards;
}

#sand3 {
  height: 100vh;
  top: 0px;
  left: 700px;
}

#sand2 {
  height: 100vh;
  top: 0px;
  left: 300px;
}

#sand1 {
  position: relative;
  height: 100vh;
  right: 30px;
}

<div id="bg">
  <img src="https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg
" alt="lock">
</div>

<div id="sand">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

冲突 javascript 或鼠标悬停事件过多？

Conflicting javascript or too many mouseover events?

html

javascript

css

jquery

clone