Javascript jquery：如何使用相同的jquery代码构建多个lightbox？

我们如何才能使通用灯箱我的意思是相同的代码为所有灯箱功能在页面上 这里是JQuery

    $(document).ready(function() {

        $('.lightbox').click(function() {
            $('.backdrop, .box').animate({
                'opacity': '.50'
            }, 300, 'linear');
            $('.box').animate({
                'opacity': '1.00'
            }, 300, 'linear');
            $('.backdrop, .box').css('display', 'block');
        });

        $('.close').click(function() {
            close_box();
        });

        $('.backdrop').click(function() {
            close_box();
        });

    });

    function close_box() {
        $('.backdrop, .box').animate({
            'opacity': '0'
        }, 300, 'linear', function() {
            $('.backdrop, .box').css('display', 'none');
        });

}

---

一个选项是使用数据属性作为选择器

---

您的脚本不知道要拉哪个灯箱，因为您从未指定灯箱。设置灯箱的一种方法是在其中一个

应用相同的类“lightbox”和其他css类，无论你在哪里使用。@SivaCharan看一下演示不是HTML5属性，与某些浏览器不兼容吗？我必须在JSFIDLE上进行编辑，也许它没有通过，我粘贴了我在上面修改的JavaScript，并使您的两个框都成为类box@VictorKilo数据是一个HTML5属性，但只要您使用JQuery，它就可以工作，因为它将充当一个垫片，您无法在浏览器上支持检索
$(document).ready(function() {

    $('.lightbox').click( function() {
        var dataTag = $(this).data('tag');
        $('.backdrop')
            .animate({'opacity': '.50'}, 300, 'linear')
            .css('display', 'block');

        $('.box[data-tag='+dataTag+']')
            .animate({'opacity': '1'}, 300, 'linear')
            .css('display', 'block');    
    });

    $('.close, .backdrop').click( function() {
        $('.backdrop, .box')
            .animate({'opacity': '0'}, 300, 'linear', 
                     function(){ $(this).css('display', 'none');})

    });
});

​

$(document).ready(function() {

$('.lightbox').click(function() {
    var thisBox = $(this).attr("name");
    console.log(thisBox);
    $('.backdrop,.' + thisBox).animate({
        'opacity': '.50'
    }, 300, 'linear');
    $('.box').animate({
        'opacity': '1.00'
    }, 300, 'linear');
    $('.backdrop,.' + thisBox).css('display', 'block');
});

$('.close').click(function() {
    close_box();
});

$('.backdrop').click(function() {
    close_box();
});

function close_box() {
    $('.backdrop,.box').animate({
        'opacity': '0'
    }, 300, 'linear', function() {
        $('.backdrop,.box').css('display', 'none');
    });
}​
});