javascript - 如何使用 jQuery 定位 html5 数据属性？

Question

我创建了一个模式，当我点击图库中的图像时会触发该模式。

<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/apple.jpg" src="assets/gallery/thumbs/tn_apple.jpg" alt="thumbnail">

<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/orange.jpg" src="assets/gallery/thumbs/tn_orange.jpg" alt="thumbnail">

<img class="galleryThumbnail" data-fullsizeImg="assets/gallery/fullsize/banana.jpg" src="assets/gallery/thumbs/tn_banana.jpg" alt="thumbnail">

我想通过获取 data-fullsizeImg 文件并将其设置为变量来进一步实现此功能。然后使用该变量集在模态窗口中创建一个带有该 data-fullsizeImg 的 src 的标签。但我似乎无法定位该属性。我尝试过使用这个

function createModal() {
    var fullsize = $(this).attr('data-fullsizeImg');
    console.log($(this).attr('data-fullsizeImg'));

    $('#modal').css({
        'display': 'block'
    });

}

这个我也试过

function createModal() {
    var fullsize = $(this).data('fullsizeImg');
    console.log($(this).attr('data-fullsizeImg'));

    $('#modal').css({
        'display': 'block'
    });

}

当我这样做时，我在控制台中得到一个未定义的信息。我做错了什么？

这就是我用来从 HTML 中触发该函数的方法(如果这有什么不同的话)。它可以显示我创建的模式

$(".galleryThumbnail").click(function() {
    createModal();
});

Answer 1

createModal 内的

this 不引用单击的元素，因此您的脚本将无法工作。

您需要将单击的元素引用传递给createModal

function createModal(el) {
  var fullsize = $(el).data('fullsizeImg');
  console.log($(el).attr('data-fullsizeImg'));

  $('#modal').css({
    'display': 'block'
  });

}

$(".galleryThumbnail").click(function() {
  createModal(this);
});