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

您不能在单个文档上具有重复的 ids .... 改用 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 选择器中，. 是类的前缀，而不是 ids 的 #