0

OK、以下のコードにはまだ問題があります。一部の SO ユーザーからガイダンスを受け取り、感謝しています。

ただし、ここで間違っていることにまだ当惑しています。画像を使用した基本的なロールオーバー jquery スクリプトがあります。ただし、ユーザーが画像の 1 つをクリックすると、その画像を「アクティブ/クリック」状態のままにしたいです。別の画像がクリックされた場合、その画像を「アクティブ/クリック」状態にし、以前にアクティブ/クリックした画像をオフ状態に戻します。

基本的に、これはタブ コントロール Off、On、Active のように動作するようにしたいと考えています。以下のコードは、クリックを除いて機能します。画像をクリックすると「アクティブ」になります。しかし、別の画像をクリックしても、以前にクリックした画像は切り替えられないため、すべての画像が「アクティブ」状態になります。私は考えられるすべてを試し、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>
4

1 に答える 1

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つのこと：最初に、正規表現で.文字をエスケープする必要があります。\.2 番目: this.src を使用している場合 = this.src も置き換えてみませんか?

于 2009-08-04T20:24:24.790 に答える