Question

我正在尝试在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的新手......谢谢！

Answer 1

这很简单。因为该方法的名称为fadeToggle，其中包含camelcasing，而不是fadetoggle。

我猜你如果看一下浏览器控制台就会看到这样的错误：

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

编辑（回复您的评论）

您在每张照片加载后绑定了点击事件，并且fadeToggle操作堆叠在一起。尝试使用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");
});

无法让fadetoggle工作

1 个答案: