2

我有一个小问题，但我有点难过。

我正在使用以下代码在我的网页上进行翻转

$("#mylink1 img").hover(
 function()
 {
  this.src = this.src.replace("_off","_on");
 },
 function()
 {
  this.src = this.src.replace("_on","_off");
 }
);

这对单个图像很有用，但我想滚动其中一个并让另一个也改变。 

<a id="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_manage_off.gif" /></a>

<a id="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_nav2_off.gif" /></a>

任何帮助，将不胜感激！谢谢！

4

2 回答 2

2

不要使用 id，使用 class 因为 id 是唯一的。

<a class="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_manage_off.gif"  /></a>

<a class="mylink1" href="about.cfm"><img src="images/Home_top_navs/aboutus_nav2_off.gif" /></a>

然后：

$(".mylink1 img").hover(
于 2010-05-28T07:03:26.633 回答
1

建议将 id 更改为字符串 @corroded。ID 在一个页面中应该是唯一的。

至于悬停在单个图像上时更改多个图像，您必须修改悬停和移出功能。目前，他们只是改变src当前悬停的图像的属性。相反，在这两个函数中，您必须遍历每个图像并更改src属性。就像是：

$("#mylink1 img").hover(
    function() {
        $(".mylink1 img").each(function() {
            this.src = this.src.replace("_off","_on");
        });
    },
    function() {
        $(".mylink1 img").each(function() {
            this.src = this.src.replace("_on","_off");
        });
    }
);

您可以通过一些柯里化来避免重复：

(function() {
    var images = $(".mylink1 img");

    function imageSwapper(imgs, from, to) {
        return function() {
            imgs.each(function() {
                this.src = this.src.replace(from, to);
            });
        };
    }

    $(images).hover(
        imageSwapper(images, "_off", "_on"),
        imageSwapper(images, "_on", "_off")
    );
})();​
于 2010-05-28T07:26:54.417 回答