Question

我正在寻找使用我在1页网站上找到的jQuery / JS灯箱，我想用它7次来保存7个独特的内容集，但是我无法正确地为其他6个实例实现它

$(document).ready(function() {
    var lightBox = $('#lightbox'),
    lightBoxContent = $('#lb-content');

var positionLightbox = function() {
    var veiwWidth = $(window).width(),
        lbContentMargin = (veiwWidth / 2) - 400,
        lbContent = $('#lb-content');

    lbContent.css({
        'left' : lbContentMargin,
        'top' : $(window).scrollTop() - 150 + 'px'
    });
};

$('#search-submit').click(function() {
    lightBox.fadeIn(function() {
        lightBoxContent.show();                               
    });
    positionLightbox();
});

$('#lb-close').click(function() {
    lightBox.hide();
    lightBoxContent.hide();
    });
});

加价：

<!-- light box -->

                <div id="lightbox"></div>
                <div id="lb-content">
                <span id="lb-close">x</span>
                <h1>More content here.</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec commodo justo. Suspendisse vel facilisis enim. Nulla lorem ante, auctor et malesuada ac, porttitor in lectus. Fusce congue pharetra tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam dapibus nec neque ut accumsan.</p>   

                </div>

<!-- // light box -->

在6个新实例中复制代码也不起作用。

$(document).ready(function() {
    var lightBox = $('#lightbox2'),
    lightBoxContent = $('#lb-content2');

var positionLightbox = function() {
    var veiwWidth = $(window).width(),
        lbContentMargin = (veiwWidth / 2) - 400 + 'px',
        lbContent = $('#lb-content2');

    lbContent.css({
        'left' : lbContentMargin,
        'top' : $(window).scrollTop() - 350 + 'px'
    });
};

$('#search-submit2').click(function() {
    lightBox.fadeIn(function() {
        lightBoxContent.show();                               
    });
    positionLightbox();
});

$('#lb-close2').click(function() {
    lightBox.hide();
    lightBoxContent.hide();
    });
});

Answer 1

不是100％确定其他内容应该在哪里，但是，假设你的灯箱代码是正确的，你的html也是（你需要它做什么），那么你不需要重复jquery代码7xs。保持相同的代码和.............假设你有这个html作为你的内容

<div id="lightbox"> content here to be lightboxed </div>
<div id="lightbox2"> content here to be lightboxed </div>
<div id="lightbox3"> content here to be lightboxed </div>
<div id="lightbox4"> content here to be lightboxed </div>
<div id="lightbox5"> content here to be lightboxed </div>
<div id="lightbox6"> content here to be lightboxed </div>
<div id="lightbox7"> content here to be lightboxed </div>

然后在你的jQuery中，你将所有这些id选择器放在你的代码中如下。

$(document).ready(function() {
    var lightBox = $('#lightbox, #lightbox2,#lightbox3,#lightbox4,#lightbox5,#lightbox6,#lightbox7'),
    lightBoxContent = $('/* same here for the 7 lb-content 1 through 7 */ ');

etc

基本上，将所有选择器分组以重用相同的代码。

正确为网站创建多个灯箱实例

1 个答案: