まだjqueryのtrouubeを持っている画像ロールオーバー

Okこのコードではまだいくつかの問題があります。私はいくつかのSOユーザーからいくつかの指導を受けており、感謝しています。まだjqueryのtrouubeを持っている画像ロールオーバー

しかし、私はまだここで間違っていることに困惑しています。私はイメージを使って基本的なロールオーバーjqueryスクリプトを持っています。しかし、ユーザが画像の1つをクリックすると、その画像を「アクティブ/クリック」の状態にしておきたい。別の画像がクリックされた場合は、その画像を「アクティブ/クリック済み」状態にし、以前にアクティブ/クリックした画像をオフ状態に戻します。

基本的には、これをタブコントロールのように動作させたいと思います。オフ、オン、アクティブ。以下のコードは、クリックを除いて動作します。画像をクリックすると、「アクティブ」に変わります。しかし、私が別のイメージをクリックすると、以前にクリックされたイメージを切り替えることはないので、すべてのイメージが「アクティブ」状態になります。私は考えることができるすべてを試して、答えをGoogleで検索しましたが、私が試したことはすべて同じ結果で終わります。すべての画像は、トグルではなくクリックしたときに「アクティブ」のままです。

誰かが見て、私がここで紛失しているものを理解するのに役立つことができますか？私はちょうどjqueryで始まり、私はまだ自分の道を学んでいます。ところで、これはCSSで行うことができることを知っていますが、私が学ぶことを試みているので、別の方法に移って間違っていることをむしろ理解しています。だから私は答えとしてCSSでこれを行うことを提案しないでください。ありがとうございます。まあ

$(document).ready(function() { 
var sel; 
    $("#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"); 
     }); 
    //handle clicks 
    }).click(function() { 
     if(sel != null) { 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_clk.gif$/ig,"_off.gif"); 

     }); 
     } 
     $(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_on.gif$/ig,"_clk.gif"); 
     }) 
     sel = this; 
    }); 


}); 


</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>

出典

2009-08-04 Rob

- あなたのクリック機能をクリックし、それをオフにしている1を参照する#nav内のすべての画像を見る必要があります。

の代わりに：

$(this).children("img").each(function() { 
      this.src = $(this).attr("src").replace(/_clk.gif$/ig,"_off.gif"); 

     });

試してみてください。

$("#nav").find("img").each(function() { 
    this.src = this.src.replace(/_clk\.gif$/i, "_off.gif"); 
});

また - 2つのことを指摘する。まず.キャラクターがあなたの正規表現で\.をエスケープする必要があります。二番目：もしあなたがthis.src =を使用しているのであれば、this.srcに置き換えてみてください。

出典

2009-08-04 20:24:24 gnarf

gnarfありがとうございます。それがトリックでした。 – Rob

まだjqueryのtrouubeを持っている画像ロールオーバー

答えて

関連する問題