Jquery 和 html:: 获取最近的数据属性

Question

这是我现在正在处理的一段类似的代码：

<div class="gallery-category">
    <h2 data-gallery="Exterior">
        <span class="gallery-back"></span>
        Exterior
    </h2>
    <div class="gallery-items-wrap">
        <div class="gallery-image-tile">
            <div class="gallery-img" data-analytics="photo-click">
                <picture>
                    <source srcset="/content/image/image1.jpg">
                </picture>
            </div>
        </div>
    </div>
</div>

<div class="gallery-category">
    <h2 data-gallery="Interior">
        <span class="gallery-back"></span>
        Interior
    </h2>
    <div class="gallery-items-wrap">
        <div class="gallery-image-tile">
            <div class="gallery-img" data-analytics="photo-click">
                <picture>
                    <source srcset="/content/image/image2.jpg">
                </picture>
            </div>
        </div>
    </div>
</div>

Exterior如果我点击图像，我必须获得价值image1.jpg。我创建了数据属性data-gallery并试图通过使用$('[data-gallery]').data("gallery")但只获取第一个值来获取值。

我需要的是这样的：

单击image1获取值“外部”。

单击image2获取值“内部”。

提前致谢

Answer 1

是的，您可以通过将单击附加到类.gallery-img，然后在单击后使用该closest()方法转到父级div并找到h2具有data-gallery属性的元素：

$('.gallery-img picture').on('click',function(){
    $(this).closest('.gallery-category').find('h2[data-gallery]').data("gallery")
})

希望这可以帮助。

$('.gallery-img picture').on('click',function(){
    $(this).closest('.gallery-category').find('h2[data-gallery]').data("gallery")
})

$('.gallery-img picture').on('click',function(){
  var gallery_data = $(this).closest('.gallery-category').find('h2[data-gallery]').data("gallery");
  
  console.log(gallery_data);
})

picture {
  width: 100px;
  height: 20px;
  border: 1px solid;
  display: block;
}