前端之家

  1. 首页
  2. 问答

如何更新 glightbox 滑块的内容？

• 问答

我正在使用 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>
heixiaoniao 回答：如何更新 glightbox 滑块的内容？

您的插件正在为动态的图像和描述创建单独的元素，因此您无法更改，目前还将有两个具有相同 ID 的按钮，一个是静态创建的，另一个是由插件创建的，这就是为什么当您执行 {{1 }} 静态按钮正在发生变化，当您重新打开它时，您可以看到滑块的变化。

相反，您可以使用 data-attributes，这样无论何时单击您的按钮都会更改静态和动态创建的按钮，以便您无需关闭和重新打开滑块即可看到更改。

演示代码：

document.getElementById(clicked_id).innerHTML ..
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
}

ajaxjavascriptlightbox
本文链接：https://www.f2er.com/615519.html

大家都在问