0

こんにちは、jquery を使用してトライステート ロールオーバーを実行しようとしています。オン状態オフ状態とクリック状態が欲しい。

特定のインターフェイス スタイルを複製する必要があり、オプションで画像を使用しないでください。以下は私が使用したコードです。ただし、別の画像をクリックしたときに画像を非アクティブ化する方法がわかりません。

こちらがシーナリオです。

1) ユーザーが画像にカーソルを合わせると、オン状態の画像がアクティブになります。2) ユーザーがその画像から別の画像に移動します。前のアクティブな画像がオフになり、現在ホバーされている画像がオンになります。3) ユーザーが画像をクリックすると、クリックされた状態の画像がアクティブになりますが、ユーザーが別の画像をクリックすると、以前にクリックした画像はオフの状態に戻ります。

私はJavascriptでこれを行うことができますが、私はJqueryが初めてで、これを理解するのに苦労しています.

コードは次のとおりです。

$(document).ready(function() {
   // Navigation rollovers
   $("#nav a").mouseover(function(){
        imgsrc = $(this).children("img").attr("src");
        matches = imgsrc.match(/_on/);
        // don't do the rollover if state is already ON
        if (!matches) {
           imgsrcON = imgsrc.replace(/.gif$/ig,"_on.gif");
           // strip off extension
           $(this).children("img").attr("src", imgsrcON);
        }
    });
    $("#nav a").mouseout(function(){
        $(this).children("img").attr("src", imgsrc);
    });
    // Navigation clicks
    $("#nav a").click(function(){
        imgsrc = $(this).children("img").attr("src");
        clkmatches = imgsrc.match(/_on/);
        // don't do the rollover if state is already ON
        if (!clkmatches) {
            imgsrcCLK = imgsrc.replace(/.gif$/ig,"_clk.gif");
            // strip off extension
            $(this).attr("src", imgsrcCLK);
        }
    });     
});
4

2 に答える 2

1

このコードは、探しているものを達成するはずです。私はその正確さをテストしていませんが (私は現在動作しているはずです!)、少なくともこれを行う方法を説明する必要があります。

var clicked_obj;
$("#nav a").mouseover(function() {
    if ( $(this).data("clicked") ) { return; }
    $(this).children("img").each(function() {
        this.src = "<path to mouseover image>";
    });
}).mouseout(function() {
    if ( $(this).data("clicked") ) { return; }
    $(this).children("img").each(function() {
        this.src = "<path to original image>";
    });
}).click(function() {
    if ( clicked_obj ) {
        $(clicked_obj).removeData("clicked").mouseout();
    }
    clicked_obj = this;
    $(this).data("clicked", true);
    $(this).children("img").each(function() {
        this.src = "<path to clicked image>";
    });
});
于 2009-07-27T20:34:00.373 に答える