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

}

DEMO

Answer 1

您的脚本不知道要拉出哪个灯箱，因为您从未指定过。您可以设置灯箱的一种方法是在其中一个id属性中指定灯箱<a>。然后，点击后，使用$("#valuePulledFromAttribute")而不是您现在使用的通用$('.backdrop, .box')来提取该属性和引用的值。

我能够使用不使用HTML5创建一个fork：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');})

    });
});

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

2 个答案: