jQuery和IE7 id问题

Question

我在我的网站上使用了“飞越”效果。像this - 水平效果。

这个脚本可以在IE8,9，FF和Chrome中使用。在IE7中，我在页面上有多个元素。两者都有相同的ID。悬停在页面上的第一个项目上，它会加载。徘徊在另一边，它根本不起作用。对我来说不合理。

我的代码如下：

HTML

<div style="margin-bottom:30px;" id="takealook-sub"> 
      <a href="#"> 
       <img style="left: -200px;" alt="" src="path/to/image"> 
      </a> 
</div> 

jQuery的

$(function(){ 
     $("#takealook-sub a").hover(function(){ 
      $("img", this).stop().animate({left:"0px"},{queue:false,duration:600}); 
     }, function() { 
      $("img", this).stop().animate({left:"-200px"},{queue:false,duration:600}); 
     }); 
    }); 

有谁知道的一个原因，人们会在IE7中工作，而不是其他？就像我说的所有其他浏览器似乎都很好。

感谢

Answer 1

您不能有一个单一的文件副本id小号....使用使用类的class，而不是... see the v4.0.1 HTML specs here和v5 HTML specs here

例子：

<div style="margin-bottom:30px;" class="takealook-sub"> 
    <a href="#"> 
     <img style="left: -200px;" alt="" src="path/to/image"> 
    </a> 
</div> 
<div style="margin-bottom:30px;" class="takealook-sub"> 
    <a href="#"> 
     <img style="left: -200px;" alt="" src="path/to/image"> 
    </a> 
</div> 

即你可以尽可能多的你喜欢....然后你可以这样做：

$(function() { 
    $(".takealook-sub a").hover(function() { 
     $("img", this).stop().animate({ 
      left: "0px" 
     }, { 
      queue: false, 
      duration: 600 
     }); 
    }, function() { 
     $("img", this).stop().animate({ 
      left: "-200px" 
     }, { 
      queue: false, 
      duration: 600 
     }); 
    }); 
}); 

在jQuery选择 .

为类代替#的前缀id小号