javascript - 否决其他 的内容

Question

我正在使用 Skeleton CSS Boilerplate 构建我的网站，并且在网格内我想使用免费的灯箱“HTML5 LightBox”。但是，当我单击任何灯箱时，它似乎被我的第一个灯箱/div 否决了。

这让我很困惑，因为我或多或少是 HTML 的初学者，所以我不知道代码中的错误可能出在哪里。

图像显示正确，p class="imgtext"也显示正确，但是，当我单击第二个图像时，我会看到网站 1 的灯箱。

这是前两列的片段，其中包含相应的灯箱:

<div class="container main">
<div class="row">

    <div class="four columns portfolio">
        <div id="mydiv" style="display:none;">
            <div class="lightboxcontainer">
                <div class="lightboxleft">
                    <div class="divtext">
                        <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 1</p>
                        <p class="divdescription" style="font-size:14px;line-height:20px;">xxxWonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                    </div>
                </div>
                <div class="lightboxright">
                    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
                </div>
                <div style="clear:both;"></div>
            </div>
        </div>
        
        <a href="#mydiv" class="html5lightbox" data-width="800" data-height="400" >        
        <div href="#mydiv" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
            <a href="#">
                <img class="grid" src="images/rven.jpg"  />
                <p class="imgtext">
                <span>
                    <span>Website 1</span>
                </span>
                </p>
            </a>
        </div>
        </a>
    </div><!-- End of element-->
    
    <div class="four columns portfolio">
        <div id="mydiv" style="display:none;">
            <div class="lightboxcontainer">
                <div class="lightboxleft">
                    <div class="divtext">
                        <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 2</p>
                        <p class="divdescription" style="font-size:14px;line-height:20px;">WonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                    </div>
                </div>
                    <div class="lightboxright">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
                    </div>
                <div style="clear:both;"></div>
            </div>
        </div>
        
        <a href="#mydiv" class="html5lightbox" data-width="800" data-height="400" >        
        <div href="#mydiv" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
            <a href="#">
                <img src="images/sortelunger.jpg"  />
                <p class="imgtext">
                <span>
                    <span>Website 2</span>
                </span>
                </p>
            </a>
        </div>
        </a>
    </div><!-- End of element-->
</div>

如果有人有任何想法，或者可以为我指出正确的方向，我将非常感激。

亲切的问候。

Answer 1

经过一段时间的摸索，我自己弄清楚了。

问题是我一直在引用 div id“mydiv”。如果我将第一个 div id 设置为“mydiv1”，并将 href 设置为 mydiv1，它会自动选择正确的 div。

这是具有正确 ID 的代码:

<div class="container main">
<div class="row">

<div class="four columns portfolio">
    <div id="mydiv1" style="display:none;">
        <div class="lightboxcontainer">
            <div class="lightboxleft">
                <div class="divtext">
                    <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 1</p>
                    <p class="divdescription" style="font-size:14px;line-height:20px;">xxxWonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                </div>
            </div>
            <div class="lightboxright">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>

    <a href="#mydiv1" class="html5lightbox" data-width="800" data-height="400" >        
    <div href="#mydiv1" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
        <a href="#">
            <img class="grid" src="images/rven.jpg"  />
            <p class="imgtext">
            <span>
                <span>Website 1</span>
            </span>
            </p>
        </a>
    </div>
    </a>
</div><!-- End of element-->

<div class="four columns portfolio">
    <div id="mydiv2" style="display:none;">
        <div class="lightboxcontainer">
            <div class="lightboxleft">
                <div class="divtext">
                    <p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Website 2</p>
                    <p class="divdescription" style="font-size:14px;line-height:20px;">WonderPlugin Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.</p>
                </div>
            </div>
                <div class="lightboxright">
                    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
                </div>
            <div style="clear:both;"></div>
        </div>
    </div>

    <a href="#mydiv2" class="html5lightbox" data-width="800" data-height="400" >        
    <div href="#mydiv2" class="html5lightbox" data-width="800" data-height="400" id="imagelist">
        <a href="#">
            <img src="images/sortelunger.jpg"  />
            <p class="imgtext">
            <span>
                <span>Website 2</span>
            </span>
            </p>
        </a>
    </div>
    </a>
</div><!-- End of element-->