1

このコードをしばらく機能させようとしてきましたが、何が問題なのかわかりません。画像付きトライステートロールオーバー用です。（私はCSSでこれを行うことができることを知っているので、それで答えないでください。）目標は、私はjqueryを学ぼうとしており、学習の一環として、ここで何が欠けているかを理解しようとしています.

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

これを行うためのより良い方法があることは知っていますが、何が間違っていたのかを本当に理解しようとしており、非常にイライラしています. したがって、私が投稿しているコードを具体的に修正するのに役立つ人がいる場合は、本当に感謝しています。繰り返しますが、これは特定の CSS 手法で実現できることはわかっていますが、ここで何が間違っているのかを理解したいと思います。

<script>
    $(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>

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<head>
</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>
4

1 に答える 1

5

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

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-31T21:59:11.373 に答える