Question

我正在尝试制作一个包含大约5-6张图像的图像预览，当用户将鼠标悬停在它上面时，这些图像会一个接一个地出现（不像带有prev和下一个按钮的旋转木马）。这是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

您正试图在on()（DOM元素）上调用HTMLElement jQuery方法。你不能这样做，jQuery方法只能在jQuery集合上调用。您可以轻松获得所需元素的jQuery集合：

使用.find()匹配图片
不需要for()循环，jQuery＆＃39; .on()将为您处理循环。
您可能还想阻止锚点的默认行为

$(function () {
    var imageCount = $('#product_grid_list').find('figure img');
    imageCount.on('click', function (e) {
        e.preventDefault()
        alert('Everything is going fine!');
    })
});

JSFiddle

Answer 2

您正在同时使用js和jQuery。这是不对的。如果你使用jQuery，那么click事件将是这样的：

$(document).('click', '#product_grid_list figure img', function(){
     alert('Everything is going fine!');
});

Answer 3

您正在使用jQuery和独立的javascript混合。您可能会一直使用jQuery，例如：

$('#product_grid_list figure:first img').click(function(e) {
      alert('Everything is going fine, hopefully!');
   });

您没有发送相应的HTML，因此我们无法测试上述内容是否正确。

Answer 4

它只是jQuery中的一个简单点击事件，不需要使用js：http://jsfiddle.net/wP3QQ/11/

$('#product_grid_list').find('figure img').click(function(e){
    alert('Everything is going fine!');
    e.preventDefault();
    });

Answer 5

您想要悬停效果，因此不应在此处使用click事件。它应该是鼠标悬停。

Working Fiddle

代码段：

$(document).on('mouseover','#product_grid_list  figure  img',function(e){
      alert("now it is working");
});

Answer 6

无法触发点击事件回调的根本原因是您尝试在＆＃34; DOM＆＃34;上注册事件处理程序。（在这种情况下： imageCount [i] ）jQuery方式的元素。如果你想使用纯JavaScript解决方案，请尝试注册这样的事件处理程序：

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

这是jsfiddle demo。

注意：在这种情况下，我没有考虑跨浏览器问题。

BTW，尝试缓存imageCount节点列表的长度，它将提高性能。

JavaScript警报回调在函数内部无效

6 个答案: