0

画像をファイルとしてdjangoデータベースに保存しています。テンプレートでは、ドロップダウンボックスから特定のオプションを選択すると、そのオプションに保存されている画像が設定された小さなサイズで表示されます。これはすべてjqueryを使用して行われます。

画像をクリックするか、画像にカーソルを合わせると（どちらか簡単な方）、画像を元のサイズに拡大したいと思います。もう一度クリックすると、小さくしたいと思います（または、ホバーしている場合は、マウスを動かすと小さいサイズに戻るはずです）。

テンプレートには次のようなものがあります。

    <script type = "text/javascript">
            $(function ()
            {
                    $("#image{{p.option}}").on('click', function ()
                    {
                            $(this).width(1000);
                    });
            });
    </script>

残念ながら、これは何もしていません。

何か案は？

4

1 に答える 1

1

元のサイズのデータ​​をどこから取得するかはわかりませんが、画像のサイズを変更する方法は次のとおりです。

var hoverSize = [100, 400];

$('img').hover(function() {
    $(this).css({
        height: hoverSize[0],
        width: hoverSize[1]
    });​
}, function() {
    $(this).css({
        height: "",
        width: ""
    });
});

こちらがデモですhttp://jsfiddle.net/TSF46/

これは、jsでコンテキスト変数を使用する方法を示しています。これを見ると、すでに知っています。

編集：次のように置き換えることができ.hover(...)ます.toggle(...)http://jsfiddle.net/TSF46/1/ < / p>

于 2012-03-10T17:01:19.133 に答える