插件不适用于第二个图像，Javascript

在我的html中，单击一个选项卡时有两个选项卡，另一个选项卡是隐藏的，而单击的选项卡显示出来，这是一个普通的javascript选项卡界面。 我有一个图库插件，它在第一个分区中显示图像的图库，但在第二个分区中它不适用于图像，即使我在第一个分区中隐藏了图像，并且它基于id工作，如

light gallery

，请问为什么它不显示第二个图像的图库，我如何解决这个问题

这是我的html

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
 <li id="tabs1" onclick="showStuff(this)" class="active pic-list"><a href="#all" >&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;All (35)</a></li>
              <li id="tabs2" onclick="showStuff(this)" class="pic-list"><a href="#ext" >&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Exterior (7) <i class="fa fa-hospital"  style="margin-left: 50px; font-size: 25px;"></i></a></li>

 <div id="tabs-1" class="tabContent" style="display: block;">
              <div class="row" id="lightgallery">

                          @if(isset($images))
                            @foreach ($images as $image)
                    <div class="col-md-3 col" style="margin-bottom: 15px" data-src="{{$image->filename}}">
                      <div class="img-con" id="{{$image->id}}">
                                      <a href="">
                          <img class="mb-2 uploaded-photos" src="{{$image->filename}}" alt="">
                                      </a>
                        <div class="img-select">
                          <div class="new gvs-title">
                            <span style="color: #333333;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i> <br/></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  @endforeach
                        @endif
              </div>
                        </div>
                  <div id="tabs-2" class="tabContent">
                  <div class="row" id="lightgallery">

                      @if(isset($images))
                          @foreach ($images as $image)
                              <div class="col-md-3 col" style="margin-bottom: 15px" data-src="{{$image->filename}}">
                                  <div class="img-con" id="{{$image->id}}">
                                      <a href="">
                                          <img class="mb-2 uploaded-photos" src="{{$image->filename}}" alt="">
                                      </a>
                                      <div class="img-select">
                                          <div class="new gvs-title">
                                              <span style="color: #333333;">{{$image->description}}080808008080 <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i> <br/></span>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          @endforeach
                      @endif
                  </div>
                  </div>

---

我基本上通过调用两个light gallery函数并更改两个div的id来解决这个问题，即

lightgallery

和

lightgallery1

 $(document).ready(function(){

        $('#lightgallery').lightGallery();
        $('#lightgallery1').lightGallery();
    });

---

您所做的此修复可能会有所帮助，因为文档中的两个元素具有相同的

id

，即使其中一个元素对用户不可见，也是无效的。如果两个div都有

id=“lightGallery”

，则

$（“#lightGallery”）

将只返回第一个div。

 $(document).ready(function(){

        $('#lightgallery').lightGallery();
        $('#lightgallery1').lightGallery();
    });