单击按钮时显示带有fancybox插件的相同图像

Question

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

$(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 .on() +