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小號