Question

我遇到了运行循环以触发HTML / CSS上的.jar事件的问题。

我知道我可以遍历并获取HTML标记上的每个单独的ID，以所需的方式执行代码。但是我知道，有一种更好的方法可以执行某种循环并使用更少的代码。

当图像在类mousemove的{{1}}上移动时，图像应跟随鼠标。任何有关如何使其正常工作的建议或想法，将不胜感激。

我尝试运行循环以将类添加到div中，但是没有运气。

mycard

div

var mouseHover = document.getElementById('moveHover');

window.onmousemove = function(e) {

  var x = e.clientX;
  var y = e.clientY;
  mouseHover.style.top = (y + 20) + 'px';
  mouseHover.style.left = (x + 20) + 'px';
};

Answer 1

如果我了解您的要求，则可以使用querySelectorAll获取元素，并使用forEach移动元素：


// get the div that responds to mouse movement
const mycard = document.querySelector('.mycard');

// add a mousemove listener
mycard.addEventListener('mousemove', function(e) {
  // get the DOM element with the mousemove listener from the event
  const {target} = e;

  // get img child elements of the target.
  // (use whatever css selector you need here. doesn't have to img)
  const images = target.querySelectorAll('img');

  // iterate over each item...
  images.forEach(image => {
    // ...and do whatever you need to do with it
    const x = e.clientX;
    const y = e.clientY;
    image.style.top = (y + 20) + 'px';
    image.style.left = (x + 20) + 'px';
  })
});

Answer 2

我也不完全确定您的最终目标是什么，但我会对其进行尝试。

我建议将moveHover更改为类而不是ID。然后您可以执行以下操作：

var mouseHover = null;

window.onmousemove = function (e) {
  if(mouseHover != null){
    var x = e.clientX;
    var y = e.clientY;
    mouseHover.style.top = (y+20) + 'px';
    mouseHover.style.left = (x+20) + 'px';
  }
};

function onHover(e){
  mouseHover = e.target.querySelector('.moveHover');
}

var elements = document.getElementsByClassName('imgHover');
for(var i = 0; i < elements.length; i++){
  elements[i].onmouseenter = onHover;
}

循环运行一次以设置onmouseenter事件。可以确保始终移动所有.moveHover元素。

循环进行onmousemove事件

2 个答案: