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在加载每张照片并且操作堆叠后，您将绑定 click 事件。尝试使用 shadowbox 插件的onFinish和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 回答