jquery - blueimp 画廊加载动态内容

Question

我已成功在我的网站中实现 Blueimp Gallery，并且使用 HTML5 数据属性能够使灯箱正常工作。

<a href="multimedia/3.jpg"
    data-gallery=""
    data-title="Caption"
    data-unique-id="3"
    data-thumbnail="multimedia/3.jpg"></a>

我用它来加载许多图片，用户可以在它们之间循环(滑动)。图片可能有与之相关的评论以及用户可以采取的不同操作。我已将评论框添加到图库中

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <div class="comments"></div>
</div>

我正在使用 slide 事件，并且我希望能够使用幻灯片的适当注释来更新注释框。我在访问 data-unique-id 时遇到问题。

$("#blueimp-gallery").on('slide', function (event, index, slide) {
    console.log(event);
    console.log(index);
    console.log(slide);
});

我在这里根本找不到unique-id。是吗？或者还有其他方法来传递这些数据吗？

Answer 1

这是Working Demo ，

您的代码看起来没问题，只需要使用 getAttribute 从元素访问 data-unique-id 属性即可现在就可以开始了。

将这些行添加到您的 js 中:

onslide: function (index, slide) {
       var unique_id = this.list[index].getAttribute('data-unique-id');
       console.log(unique_id); //your unique id
 }