jquery - 使用 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 现在工作！！！ 不过，我不能发布多个链接...啊！我会用测试链接发表评论。

我很好奇如何使用数组和循环来简化这一点，但我不想打扰。我也很困惑为什么上面的代码从来没有工作过。似乎我选择了正确的元素，但 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"); 
    });


});

score 0 · Accepted Answer

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

我认为你之前看到的那个问题让你走上了正确的道路。最好的办法是使用 .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，直到它起作用——这就是我一直在学习的方式。enter code here

score 0 · Accepted Answer

我的第一种方法是将圆圈分配给空的 css 类，以便对它们进行分组并使用 jquery 选择它们。例如，圆圈 1、4 和 5 可以具有类“nav1_links”。请记住，您可以为一个元素分配多个类，如果您希望一个链接位于两个导航链接的保护伞下，这非常好，例如导航 1 突出显示 1、4 和 5 以及导航 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() 遍历当前活动导航链接的所有相关圆圈，并从数组中应用适当的 src每个圈子的 srcs。但是数组和for循环是一个完全独立的问题，所以如果这没有意义，那么现在就坚持简单的路线（我不确定你有多少脚本经验）。

这是否回答你的问题？我承认我对你的脱节/二次翻转的概念有点困惑。

jquery - 使用 Jquery 进行多次或单独的翻转。模拟以获得更好的解释

2 回答 2

Related

Reference