jquery - Jquery を使用した複数または個別のロールオーバー。より良い説明のためにモックアップする

Question

UPDATED: 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 (2 次ロールオーバー状態) を付けました。私の問題は、バラバラのロールオーバー、または二次ロールオーバーの円ボタンをターゲットにすることにあると思います。モックアップのリンクを参照してください。

次のモックアップは、まさにナビゲーションに必要なものです。モックアップはこちら

更新: 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

このような巨大な質問に対する簡単な答えはありません。あなたが求めているのは、「このWebページを作成するにはどうすればよいですか？」です。

あなたが以前に見た質問はあなたを正しい軌道に乗せると思います。最善の策は、.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 つのリンクを 2 つのナビゲーションリンクの傘下に置きたい場合に便利です。たとえば、ナビゲーション 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") に置き換えます。

より柔軟な (そして複雑な) 方法は、1 つの円のすべての可能な src 値を配列に入れ、.each() を使用して、現在アクティブなナビゲーションリンクに関連するすべての円を反復処理し、配列から適切な src を適用することです。各サークルのsrcの。しかし、配列と for ループはまったく別の問題なので、それが意味をなさない場合は、今のところ簡単な方法を使用してください (スクリプトの経験がどれだけあるかはわかりません)。

それはあなたの質問に答えていますか？ばらばら/二次ロールオーバーの概念について少し混乱していることを認めます。

jquery - Jquery を使用した複数または個別のロールオーバー。より良い説明のためにモックアップする

2 に答える 2

Related

Reference