如何更新 glightbox 滑块的内容？

Question

我正在使用 Glightbox 创建带有图像描述的画廊。我想在点击时更新按钮的文本。单击按钮并重新打开灯箱时，按钮上的文本会更改。如何在不重新打开灯箱的情况下更改按钮上的文字？

可以找到 Glightbox 文档here

        <!DOCTYPE html>

            <head>
                <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" />
                <link
                    rel="stylesheet"
                    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
                    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
                    crossorigin="anonymous"
                />
                <link rel="stylesheet" href="demo/css/style.css" />
                <link rel="stylesheet" href="dist/css/glightbox.css" />
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
            </head>

            <body>

                <!-- Images with description example -->
                <section class="section pair">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <ul class="box-container three-cols">
                                    <li class="box">
                                        <div class="inner">
                                            <a href="demo/img/large/gm8.jpg" class="glightbox2" data-glightbox="title: Description Right; description: .custom-desc1; descPosition: left;">
                                                <img src="demo/img/small/gm8.jpg" alt="image" />
                                            </a>

                                            <div class="glightbox-desc custom-desc1">
                                                <p>
                                                    <button id="button1" onclick="choose_button(this.id)">Wybierz1</button></p>
                                               
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
            
                <script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
                <script src="demo/js/valde.min.js"></script>
                <script src="dist/js/glightbox.js"></script>
                <script src="demo/js/site.js"></script>
                <script>
                

                    var lightboxDescription = GLightbox({
                        selector: '.glightbox2',
                    });

                    lightboxDescription.on('close', () => {
                    // Do something
                    lightboxDescription.reload()
                });


                function choose_button(clicked_id){
                document.getElementById(clicked_id).innerHTML = "button text changed"

            }

            </script>
        </body>
    </html>

Answer 1

您的插件正在为动态的图像和描述创建单独的元素，因此您无法更改当前还有两个具有相同 ID 的按钮，一个是静态创建的，另一个是由插件创建的，这就是为什么当您这样做时 document.getElementById(clicked_id).innerHTML .. 静态按钮正在发生变化，当你重新打开它时你可以看到滑块的变化。

相反，您可以使用 data-attributes，这样每当您的按钮被点击时，更改静态的和动态创建的按钮，这样您就可以看到更改而无需关闭并重新打开你的滑块。

演示代码 :

var lightboxDescription = GLightbox({
  selector: '.glightbox2',
});

lightboxDescription.on('close', () => {
  lightboxDescription.reload()
});

function choose_button(clicked_id) {
  //loop through same data-ids
  document.querySelectorAll('[data-id="' + clicked_id + '"]').forEach(function(el) {
    //change text
    el.textContent = "button text changed"
  })

}

img {
  width: 50px;
  height: 100px
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

<!-- Images with description example -->
<section class="section pair">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="box-container three-cols">
          <li class="box">
            <div class="inner">
              <a href="https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg" class="glightbox2" data-glightbox="title: Description Right; description: .custom-desc1; descPosition: left;">
                <img src="https://biati-digital.github.io/glightbox/demo/img/large/gm2.jpg" alt="image" />
              </a>

              <div class="glightbox-desc custom-desc1">
                <p>
                  <!--pass data-id-->
                  <button data-id="button1" onclick="choose_button(this.getAttribute('data-id'))">Wybierz1</button></p>

              </div>
            </div>
          </li>
          <li class="box">
            <div class="inner">
              <a href="https://biati-digital.github.io/glightbox/demo/img/large/gm5.jpg" class="glightbox2" data-glightbox="title: Description Right; description: .custom-desc2; descPosition: left;">
                <img src="https://biati-digital.github.io/glightbox/demo/img/large/gm5.jpg" alt="image" />
              </a>

              <div class="glightbox-desc custom-desc2">
                <p>
                  <!--pass data-id-->
                  <button data-id="button2" onclick="choose_button(this.getAttribute('data-id'))">Wybierz2</button></p>

              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

如何更新 glightbox 滑块的内容？

How to update content of glightbox slider?

javascript

ajax

lightbox