javascript - jquery：如何使用相同的 jquery 代码构建多个灯箱？

Question

我们如何制作通用灯箱我的意思是页面中所有灯箱功能的相同代码这里是 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');
        });

}

演示

Answer 1

您的脚本不知道要拉出哪个灯箱，因为您从未指定一个。设置灯箱的一种方法是id在其中一个<a>属性中指定灯箱。然后，在单击时，拉出该属性的值并使用而不是您现在使用$("#valuePulledFromAttribute")的泛型进行引用。$('.backdrop, .box')

我能够创建一个不使用 HTML5 的分支：http: //jsfiddle.net/J6ee5/2/

$(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');
    });
}​
});

Answer 2

一种选择是使用数据属性作为选择器http://jsfiddle.net/Q676T/1/

$(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');})

    });
});

​