Question

我有一个包含多个图片的链接。在悬停时，设置间隔并添加css类，并在图像上迭代。鼠标移出后，间隔被清除。代码如下：

jQuery('#flicker').hover(
    function() {
       flicker = setInterval(function() {
           if (jQuery('#flicker img.active').next('img').length > 0) {
               jQuery('#flicker img.active').removeClass('active').next('img').addClass('active');
           } else {
               jQuery('#flicker img').removeClass('active');
               jQuery('#flicker img:first-child').addClass('active');
           } 
       }, 200);
     }, 
     function() {
       clearInterval(flicker);
     }
 );

出于某种原因，在Internet Explorer 6,7,8上链接href在悬停时更改为一串数字。

对于测试用例，请参阅here。任何帮助非常感谢，我以前没见过这个bug！

感谢。

（如果您无法复制，请告诉我，我正在使用Parallels在Mac上进行测试。）

Answer 1

这是因为您调用了存储间隔计时器flicker的变量，该计时器也是元素的id，并且您没有声明变量，因此您成为了Horror of Implicit Globals。在IE（以及其他一些浏览器）上，id值最终成为window对象上的属性（值为Element），因此您最终会为元素指定一个数字，在IE上设置其“默认”属性，即href。

只需创建一个私有上下文并声明您的flicker变量：

(function() {
    var flicker = 0;

    jQuery('#flicker').hover(
        function() {
           flicker = setInterval(function() {
               if (jQuery('#flicker img.active').next('img').length > 0) {
                   jQuery('#flicker img.active').removeClass('active').next('img').addClass('active');
                   } else {
                   jQuery('#flicker img').removeClass('active');
                   jQuery('#flicker img:first-child').addClass('active');
               } 
           }, 200);
         }, 
         function() {
           clearInterval(flicker);
         }
     ); 
})();

偏离主题：我建议的其他一些更改：

每次调用jQuery函数时，都需要完成相当多的工作，因此在文档未更改时重复调用相同的选择器效率相当低。当你看到它时，这些模式中的一个会引起你的注意。建议更新悬停代码以存储和重用结果。（请注意，它在IE7上运行得很好，这不是一个快速的浏览器，所以...）
建议在清除计时器时清除flicker变量。 0是一个很好的值，因为0不是有效的计时器句柄。（这就是为什么我用它作为上面的初始值。）以防万一有些奇怪的事情发生在浏览器调用你的函数。

错误：悬停正在改变链接href，Internet Explorer

1 个答案: