0

私は jQuery を初めて使用し、トグル機能が非常に魅力的であることがわかりました。次のように、クリックしてもう一度元に戻すと、画像が別の画像に切り替わります。

$(document).ready(function() {
    $("#expand").toggle(function(){
        $(this).attr("src","images/expandWidget.png");
    },function(){
        $(this).attr("src", "images/minimizeWidget.png");
    });
}); // end ready

画像自体は次のように宣言されます。

<img id="expand" src="images/minimizeWidget.png"></img></div>

これをChromeで実行すると、画像が次のように変化したことに気付きました。

<img id="expand" src="images/minimizeWidget.png" style="display: none;">

そして、私のイメージは表示されませんでした。なぜクロムはそれをしたのですか？代わりにトグルを click() に変更すると、画像は問題なく表示され、別の画像に切り替えることはできますが、もちろん戻ることはできません。コンソールにエラーはなく、ページは img に影響する他のスタイルをインポートしません。トグルの使い方が間違っていませんか? さらに情報が必要な場合はお知らせください。

ありがとう

4

2 に答える 2

0

toggle使用する代わりに.click()

LIVE DEMO

var images = ["images/expandWidget.png", "images/minimizeWidget.png"], c=0;
$("#expand").click(function(){
    this.src = images[++c%2];
});
于 2013-03-03T23:51:07.127 に答える
0

jQuery トグルの機能を誤解しています。

要素の可視性を「トグル」するため、要素が消えます。これは確かに最高の名前ではありませんが、私たちは皆、独自のバージョンの toggle メソッドを 内に記述する必要がありました.click()。

ドキュメントを参照してください。

http://api.jquery.com/toggle/

おそらく次のようなものが必要です。

$("#expand").click(function(){
    if($(this).attr("src") == "images/expandWidget.png") {
        $(this).attr("src", "images/minimizeWidget.png");
    } else {
        $(this).attr("src","images/expandWidget.png");
    }
});
于 2013-03-03T23:45:31.897 に答える