javascript - 在按钮单击时显示与 fancybox 插件相同的图像

Question

我有一些具有相同 ID 的按钮 - previewPhoto。我正在使用 fancybox 来显示照片。但所有按钮都显示相同的图像。哪里可能有问题，我的“照片”和“身份证”变量是不同的。

$(function() {
    $('button#previewPhoto').each(function() {
        photo = $(this).val();
        id = $(this).attr("title");
        link = 'http://domain.com/members/photos/'+id+'/'+photo;
        $(this).click(function() {
            $.fancybox({
                //'orig'            : $(this),
                'padding'       : 0,
                'href'          : link,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });
        });
    });
});

Answer 1

你不需要.each()，只需这样做：

jQuery(function ($) {
    $(".previewPhoto").on("click", function () {
        var photo = $(this).val(),
            id = this.title,
            link = 'http://farm8.staticflickr.com/' + id + '/' + photo;
        $.fancybox(link, {
            // API options here
        });
    });
});

见JSFIDDLE

注意：.on()需要 jQuery v.1.7+