使用Jquery的多个或单独的滚转。为了得到更好的解释而模仿

Question

更新: 06.29.10，这是我目前使用的代码。在搜索Jquery文档之后，我已经非常接近了。

$(document).ready(function(){

//Rollovers for circle buttons

    $('img').hover(
        function(){
            this.src = this.src.replace("_org","_over");
        },
        function(){
            this.src = this.src.replace("_over","_org");
    });

//Disjointed rollover - on hover make circles use secondary hover (over2)

    $(".genBtn80").hover(
        function(){
            $(".gen80circle").src = $(".gen80circle").src.replace("_org","_over2");
        },
        function(){
            $(".gen80circle").src = $(".gen80circle").src.replace("_over2","_org");
        });
});

所以我把所有关于滚转的工作都做好了。我的图像后缀为_org (用于正常状态)、_over (第一次翻转状态)和_over2 (用于二级翻转状态)。我想我的问题现在是针对圆圈按钮的脱节滚动，或二次滚动。请查看模型链接。

下面的模型正是我导航所需要的。点击这里获取模型

更新: 06.30.10现在工作了！我不能发布超过一个链接though...argh！我将在测试链接中发表评论。

我很好奇如何使用数组和循环来简化这个问题，但我不想成为麻烦。我也不明白为什么上面的代码不起作用。似乎我选择了正确的元素，但src从未改变过。我肯定我做错了什么，但我是来学习的。:)

$(document).ready(function(){

//Rollovers for circle buttons

    $(".circleBtn").hover(
        function(){
            this.src = this.src.replace("_org","_over");
        },
        function(){
            this.src = this.src.replace("_over","_org");
    });

//Rollovers for navigation buttons

    $(".navBtn").hover(
        function(){
            this.src = this.src.replace("_org","_over");
        },
        function(){
            this.src = this.src.replace("_over","_org");
    });

//Disjointed rollovers - use secondary rollover for circle imgs

    $(".genBtn80").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#janice_circle").attr("src", "images/janice_over2.gif"); 
            $("#sugi_circle").attr("src", "images/sugi_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#janice_circle").attr("src", "images/janice_org.gif"); 
            $("#sugi_circle").attr("src", "images/sugi_org.gif"); 
    });

    $(".genBtn70").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#hatsuko_circle").attr("src", "images/hatsuko_over2.gif"); 
            $("#satoko_circle").attr("src", "images/satoko_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#hatsuko_circle").attr("src", "images/hatsuko_org.gif"); 
            $("#satoko_circle").attr("src", "images/satoko_org.gif"); 
    });

    $(".genBtn60").hover(
        function(){
            this.src = this.src.replace("_org","_over");
            $("#noriko_circle").attr("src", "images/noriko_over2.gif");
            $("#yuki_circle").attr("src", "images/yuki_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#noriko_circle").attr("src", "images/noriko_org.gif"); 
            $("#yuki_circle").attr("src", "images/yuki_org.gif"); 
    });

    $(".genBtn50").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#ritsuko_circle").attr("src", "images/ritsuko_over2.gif"); 
            $("#yuka_circle").attr("src", "images/yuka_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#ritsuko_circle").attr("src", "images/ritsuko_org.gif"); 
            $("#yuka_circle").attr("src", "images/yuka_org.gif"); 
    });

    $(".genBtn40").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#christina_circle").attr("src", "images/christina_over2.gif"); 
            $("#chiharu_circle").attr("src", "images/chiharu_over2.gif");
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#christina_circle").attr("src", "images/christina_org.gif"); 
            $("#chiharu_circle").attr("src", "images/chiharu_org.gif"); 
    });

    $(".genBtn30").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#haruko_circle").attr("src", "images/haruko_over2.gif"); 
            $("#shiho_circle").attr("src", "images/shiho_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#haruko_circle").attr("src", "images/haruko_org.gif"); 
            $("#shiho_circle").attr("src", "images/shiho_org.gif"); 
    });

    $(".genBtn20").hover(
        function(){
            this.src = this.src.replace("_org","_over"); 
            $("#aoi_circle").attr("src", "images/aoi_over2.gif"); 
            $("#tomoko_circle").attr("src", "images/tomoko_over2.gif"); 
            $("#miho_circle").attr("src", "images/miho_over2.gif"); 
    },
        function(){
            this.src = this.src.replace("_over","_org");
            $("#aoi_circle").attr("src", "images/aoi_org.gif"); 
            $("#tomoko_circle").attr("src", "images/tomoko_org.gif"); 
            $("#miho_circle").attr("src", "images/miho_org.gif"); 
    });


});

Answer 1

我的第一种方法是将圆圈分配给空css类，只需对它们进行分组并使用jquery选择它们。例如，圆圈1、4和5可以有类"nav1_links“。请记住，您可以为一个元素分配多个类，如果您希望一个链接位于两个导航链接的伞下，例如nav 1突出显示1、4和5以及nav 2突出显示1、2和3 --那么循环1将具有属性class="nav1_links nav2_links"。然后可以使用jquery访问适当的循环：

$("#nav1").hover(function(){
    this.src = this.src.replace("_org","_over"); // Change src for nav1
    $(".nav1_links").attr("src", "rolloverState.png"); // Change src for all corresponding circles
});

但是，如果每个圆圈的图像是不同的，这就会变得更加棘手。处理这个问题的最简单的方法(虽然不是最干净的)是对每一个涉及的圆圈重复这一行，但是将类名".nav1_links“替换为单个循环的id名称("#circleID")。

更灵活(也更复杂)的方法是将一个圆的所有可能的src值放入一个数组中，然后使用.each()迭代当前活动nav链接的所有相关圆圈，并从每个圆的srcs数组中应用适当的src。但是数组和for循环是一个完全不同的问题，所以如果这没有意义，那么现在就坚持使用简单的路径(我不知道您有多少脚本体验)。

这能回答你的问题吗？我承认我对你关于脱节/二次展期的想法有点困惑。

Answer 2

这么大的问题没有简单的答案。你要问的是“我该如何制作这个网页？”

我认为你之前看过的那个问题使你走上了正确的轨道。最好的方法是使用.css()或.addClass()和.removeClass()方法。例如，如果您的第一个导航按钮具有id="nav1“，并且希望它突出显示按钮1、4和5，那么首先要做的是：

$("#nav1").mouseover(function(){
    $("#button1").addClass("circleHighlight");
    $("#button4").addClass("circleHighlight");
    $("#button5").addClass("circleHighlight");
});

$("#nav1").mouseout(function(){
    $("#button1").removeClass("circleHighlight");
    $("#button1").removeClass("circleHighlight");
    $("#button1").removeClass("circleHighlight");
});

然后在你的css中，定义你想要的.circleHighlight的样子。如果您想更改每个圆圈的href (放入链接和文本等)动态地，您可以在第一个函数中添加如下一行：

$("#button1").attr('href', 'http://www.address.com');

另外，如果你想稍微清理一下东西，你可以为底部的每个导航按钮创建一个数组，这个按钮包含哪个圆圈应该访问。然后，您还可以创建一个导航按钮数组。这样，您就可以使用for循环(或jquery中的.each() )对所有导航按钮以及每个导航按钮应该影响的所有圆圈进行这些更改。

这有帮助吗？如果你需要更具体的帮助，你可以问一个具体的问题。或者只是尝试使用jquery，直到它起作用--这就是我一直在学习的。