如何使用 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 文件并将其设置为变量来进一步实现此功能。然后使用该变量集在模态 window 中创建一个带有该 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);
});

Answer 2

您可以使用data()方法访问自定义数据属性。如果您需要在函数内部访问它，则将 this 实例作为参数传递。

function createModal(ele) {
    var fullsize = $(ele).data('fullsizeimg');
    console.log($(ele).data('fullsizeimg'));

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

}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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">

或

$(".galleryThumbnail").click(function() {
    var fullsize = $(this).data('fullsizeimg');
    console.log($(this).data('fullsizeimg'));

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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">

你需要在 lower

中使用 fullsizeimg

All attribute names on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.

取自：http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

Answer 3

以前答案的另一种方法是：

createModal.call(this);

现在函数createModel中，this继承自调用函数，可以参考$(this)

Answer 4

有两种解决方法：

将其作为参数传递给被调用函数。
利用event争论。

1.

function createModal(img) { // get it here
  var fullsize = $(img).data('fullsizeImg'); // use here
  console.log($(img).attr('data-fullsizeImg')); // and here

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

}

$(".galleryThumbnail").click(function() {
  createModal(this); // <----pass this here
});

2.

function createModal(e) { // pass e == event
  var fullsize = $(e.target).data('fullsizeImg'); // e.target is the clicked element.
  console.log($(e.target).attr('data-fullsizeImg')); // and here

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

}

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

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

How to target a html5 data attribute with jQuery?

javascript

jquery

html

custom-data-attribute

1.

2.