JavaScript 警报回调在函数内部不起作用

Question

我正在尝试制作包含大约 5-6 张图像的图像预览，当用户将鼠标悬停在它上面时，这些图像将一个接一个地出现(不像带有上一个和下一个按钮的旋转木马)。这是 fiddle由我到目前为止收集到的内容组成。我不知道这种方法是否正确。但由于警报回调不起作用，我被卡住了。有人可以告诉我哪里出了问题吗？

$(function() 
  {
      var imageCount = $('#product_grid_list').find('figure')[0].getElementsByTagName('img');

      for (var i = 0, n = imageCount.length; i < n; i++) {
          imageCount[i].on('click', function(e) 
              {
                  alert('Everything is going fine!');
              }          
          );
      }
  }
);

Answer 1

无法触发点击事件回调的根本原因是您试图在“DOM”(在本例中为:imageCount[i])元素上注册事件处理程序jQuery 方式。如果您想使用纯 javascript 解决方案，请尝试像这样注册事件处理程序:

imageCount[i].addEventListener('click', function(e){
    alert('Everything is going fine!');
});

这是一个jsfiddle demo .

注意:本例中我没有考虑跨浏览器问题。

顺便说一句，尝试缓存 imageCount 节点列表的长度，这将提高性能。