照片滑动灯箱显示数据-属性数据-lbwps-缩略图下方的描述

如何解决照片滑动灯箱显示数据-属性数据-lbwps-缩略图下方的描述

我已经尝试在图库中使用 javascript 显示来自 attrubite 的变量。低于一个元素：

<div class="gallery-item">
  <a href="image-full.jpg" data-lbwps-description="example description">
    <figure>
      <img src="image-thumb.jpg">
      <figcaption class="description-image">
        "place to display data-lbwps-description"
      </figcaption>
    </figure>
  </a>
</div>

通过这个脚本，我可以从数据属性中获取变量

var desc = $(".gallery-item a").data("lbwps-description");
$('.description-image'). text(desc);

但是变量取自gallery 中的第一个元素，并放入带有“gallery-item”类的每个后续div。我在每个 div 的 data-lbwps-description 中有不同的变量。

如何更改函数以从 data-lbwps-description 中获取变量并仅在此 div 中将其放入 figcaption 并在所有图库项目中重复此操作？

解决方法

这有效：
HTML

<div class="gallery">
  <div class="gallery-item">
    <a href="image-full.jpg" data-lbwps-description="example description1">
      <figure>
        <img src="image-thumb.jpg">
        <figcaption class="description-image">place to display data-lbwps-description</figcaption>
      </figure>
    </a>
  </div>
  <div class="gallery-item">
    <a href="image-full.jpg" data-lbwps-description="example description2">
      <figure>
        <img src="image-thumb.jpg">
        <figcaption class="description-image">place to display data-lbwps-description</figcaption>
      </figure>
    </a>
  </div>
  <div class="gallery-item">
    <a href="image-full.jpg" data-lbwps-description="example description3">
      <figure>
        <img src="image-thumb.jpg">
        <figcaption class="description-image">place to display data-lbwps-description</figcaption>
      </figure>
    </a>
  </div>
</div>

还有这个jquery：

$(".gallery-item").each(function( index,element){
    console.log( $(this).find('a').data('lbwps-description'));
    var desc = $(this).find('a').data('lbwps-description');
    $(this).find('.description-image').text(desc);
});