javascript - <div> 标签有问题吗？

Question

这是我认为非常简单的问题，但我似乎无法弄清楚。我正在一个 friend 的网站上工作，我使用了 lightGallery JQuery 插件可以展示一两个视频，但这就是问题所在。代码类似于...

<div class="blah"> 
    <div class="more">
        <div id="lightGallery">
            <a href="#" data-src="http://www.youtube.com/watch?v=youtubeurl">link to open up video through lightGallery.</a> 
        </div>
    </div>
</div> 

该代码将完美运行。我什至可以在它旁边添加另一个视频链接，它将包含在插件的视频库中。但是，当我需要将其包含在网页的另一部分中时，再往下看，第二个链接根本不起作用。像这样。

<div class="blah"> 
    <div class="more">
        <div id="lightGallery">
            <a href="#" data-src="http://www.youtube.com/watch?v=youtubeurl">link to open up video through lightGallery.</a> 
        </div>
    </div> 
    <div class="blah2"> 
        <div class="more2">
            <a href="#" data-src="http://www.youtube.com/watch?v=2ndyoutubeurl">link to open up another video through lightGallery.</a> 
        </div>
    </div>
</div> 

我想我也知道为什么。该链接必须位于

下

<div id="lightGallery"> 

标签。但是与样式相关的其他/div 标签会中断它在两个链接上的拉伸(stretch)。当我尝试使用另一个 div id 标签调用 lightGallery 两次时，第二个链接仍然无法工作。有人有什么想法吗？

谢谢。

Answer 1

查看文档以将某些内容制作为 lightGallery:

// Makes an element with the id "lightGallery" a light gallery
$("#lightGallery").lightGallery(); 

很明显，如果你没有将它放在灯光画廊 div 中，它就无法工作。所以只需制作两个灯廊即可:

JS

$(document).ready(function() {
    $("#lightGallery").lightGallery(); 
    $("#lightGallery2").lightGallery();
});

HTML

<div class="blah"> 
    <div class="more">
        <div id="lightGallery">
            <a href="#" data-src="http://www.youtube.com/watch?v=youtubeurl">link to open up video through lightGallery.</a> 
        </div>
    </div> 
</div>
<div class="blah2"> 
    <div class="more2">
         <div id="lightGallery2">
            <a href="#" data-src="http://www.youtube.com/watch?v=2ndyoutubeurl">link to open up another video through lightGallery.</a> 
         </div>
    </div>
</div>