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文件并将其设置为变量来进一步扩展此功能。然后使用该变量集在模态窗口中创建一个标记，其中src为该data-fullsizeImg。我似乎无法定位该属性。我试过用这个

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

this内的

createModal未引用所点击的元素，因此您的脚本无效。

您需要将点击的元素引用传递给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实例作为参数传递。

＆＃13;

function createModal(ele) {
    var fullsize = $(ele).data('fullsizeimg');
    console.log($(ele).data('fullsizeimg'));

    $('#modal').css({
        'display': 'block'
    });

}

$(".galleryThumbnail").click(function() {
    createModal(this);
});

＆＃13;

<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">

＆＃13;

或者

＆＃13;

$(".galleryThumbnail").click(function() {
    var fullsize = $(this).data('fullsizeimg');
    console.log($(this).data('fullsizeimg'));

    $('#modal').css({
        'display': 'block'
    });
});

＆＃13;

<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">

＆＃13;

＆＃13; 你需要在较低的

中使用fullsizeimg

HTML文档中HTML元素的所有属性名称都会自动进行ASCII小写，因此对ASCII大写字母的限制不会影响此类文档。

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

Answer 3

有两种方法可以解决这个问题：

将此作为参数传递给被调用的函数。
利用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(); 
});

Answer 4

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

setTileDecoder()

现在在函数createModel中，createModal.call(this);继承自调用者函数，您可以使用this作为参考。

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

4 个答案:

1

2