0

Shadowbox内に「EXIFデータの表示/非表示」ボタンを実装しようとしています。exifデータを含むdivを生成し、fadetoggle（）を使用して表示および非表示にするコードは次のとおりです。

Shadowbox.init({
    onFinish: function (rawr) {
        $("#sb-body-inner").prepend("<div id='sb-exif'>This is some exif data.</div>");
        $("#sb-nav-exif").click(function () {
            $("#sb-exif").fadetoggle(250, "linear");
        });
    }
});

実際のボタンのコードは次のとおりです（shadowbox.jsから）：

<a id="sb-nav-exif" title="EXIF Data"></a>

なぜこれが機能しないのか誰かが提案できますか？私はjQueryを初めて使用します...ありがとう！

4

1 に答える 1

1

とても簡単です。メソッドの名前はfadeToggleキャメルケースであるため、ではありませんfadetoggle。

ブラウザコンソールを見ると、次のようなエラーが表示されると思います。

Uncaught TypeError: Object [object Object] has no method 'fadetoggle'

編集（あなたのコメントに応えて）

fadeToggle各写真が読み込まれ、アクションがスタックされた後、クリックイベントをバインドします。次のように、シャドウボックスプラグインのonFinishandイベントを使用して、画像が変更または閉じられたときにクリックイベントのバインドを解除してみてください。onClose

Shadowbox.init({
    onFinish: function (rawr) {
        $("#sb-body-inner").prepend("<div id='sb-exif'>This is some exif data.</div>");
        $("#sb-nav-exif").click(function () {
            $("#sb-exif").fadeToggle(250, "linear");
        });
    },
    onChange: function() {
        $("#sb-nav-exif").unbind('click');
    },
    onClose: function() {
        $("#sb-nav-exif").unbind('click');
    }
});

コンテンツが読み込まれるため、両方が必要です。onFinishイベントは、新しい画像を開いたときと、次/前のコントロールを使用してナビゲートしているときの両方で呼び出されます。

ただし、クリックイベントのバインドとバインド解除を何度も繰り返すことを避けるために、この代替手段を試すことをお勧めします。

Shadowbox.init({
    onFinish: function (rawr) {
        $("#sb-body-inner").prepend("<div id='sb-exif'>This is some exif data.</div>");
    }
});

// this way you only bind it once
$('#sb-container').on('click', "#sb-nav-exif", function() {
    $("#sb-exif").fadeToggle(250, "linear");
});
于 2012-07-26T23:02:29.520 に答える