誰かがこのJqueryコードで助けてもらえますか

私はこのコードを今のところ動作させようとしてきましたが、何が間違っているのか理解できません。これは、画像を含むトライステートロールオーバーのためのものです。（私はCSSでこれを行うことができることを知っていますので、それに答えないでください）。目標は、私はjqueryを学ぼうとしており、学習の一環として私がここで何が欠けているのかを解明しようとしています。誰かがこのJqueryコードで助けてもらえますか

私が問題を抱えているのは、mouseoverイベントとmouseoutイベントを行うときにボタンが正しく強調表示されることです。しかし、ボタンをクリックしてから別のボタンをクリックすると、クリックしたボタンがすべてオンになります。私は、一般的なタブコントロールのように各画像をクリックするとon状態を切り替えることができる必要があります。

私はこれを行うより良い方法があることを知っていますが、私は実際に私が間違っていたことを学ぶことを試みており、私は極端に欲求不満です。だから、特に私が投稿しているコードを修正するのに役立つことができる人がいるなら、本当に感謝します。繰り返しますが、私はこれが特定のCSSテクニックで達成できることを知っていますが、ここで間違っていることを理解したいと思います。

ありがとうございます。

$(document).ready(function() { 
var clicked_obj; 
    $("#nav a").mouseover(function() { 
     if ($(this).data("clicked")) { return; } 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_off.gif$/ig,"_on.gif"); 
     }); 
    }).mouseout(function() { 
     if ($(this).data("clicked")) { return; } 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_on.gif$/ig,"_off.gif"); 
     }); 
    }).click(function() { 
     if (clicked_obj) { 
      $(clicked_obj).removeData("clicked").mouseout(); 
     } 
     clicked_obj = this; 
     $(this).data("clicked", true); 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_off.gif$/ig,"_clk.gif"); 
     }); 
    }); 

}); 


</script> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 
    <body> 
     <div id="nav"> 
      <div id="logo"><img src="images/inbox_wrilogo.gif" width="143" height="30" alt="logo" border="0" /></div> 
      <div id="tab"><a href="#"><img src="images/nav_support_off.gif" width="75" height="22" alt="Support" name="support" border="0"/></a></div> 
      <div id="tab"><a href="#"><img src="images/nav_acct_off.gif" width="75" height="22" alt="My Account" name="acct" border="0" /></a></div> 
      <div id="tab"><a href="#"><img src="images/nav_inbox_off.gif" width="75" height="22" alt="Inbox" name="inbox" border="0" /></a></div> 
     </div> 
    </body> 
</html>

出典

2009-07-31 Rob

トピックのタイトルを質問の形式で入力することをお勧めします。より具体的にはより良い。 –

エラーが生じますか？彼らは何ですか？ –

ここで何が起こっているのかを理解するには、HTMLコードを参照する必要があります。 – SolutionYogi

あなたは:)あなたがやるべきだと思う正確に何をする（jqueryのの美しさを：）持っている...あなたがクリックしたときに、以前に新しい1上のボタンをクリックしたから選択された状態を削除する....ここでは画像の代わりにスタイルを使用するバージョンがありますが、画像の変更に追加/削除クラスを変更することができます

var sel; 
$(document).ready(function() { 
    $("#nav a") 
    .mouseover(function() { 
     $(this).addClass("mouseOver"); 
    }) 
    .mouseout(function() { 
     $(this).removeClass("mouseOver"); 
    }) 
    .click(function() { 
     if(sel != null) { 
      $(sel).removeClass("selected"); 
     } 
     $(this).addClass("selected"); 
     sel = this; 
    }); 
});

出典

2009-07-31 21:59:11 Jaime

それはかなりです。 –

画像をどのように使用するかの例を教えてください。私はいくつか試して、私はそれが私が好きなように動作するように取得することができません。 – Rob

誰かがこのJqueryコードで助けてもらえますか

答えて

関連する問題