How to target a html5 data attribute with jQuery?

Question

I have created a modal that is triggered when I click on an image from a gallery.

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

I would like to further this function by getting the data-fullsizeImg file and set that to a variable. Then with that variable set create an tag within the modal window with a src of that data-fullsizeImg. I cannot seem to target the attribute though. I have tried to use this

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

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

}

I have also tried this

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

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

}

When I do this I get an undefined in the console. What am I doing wrong?

This is what I am using to trigger the function from within HTML if that makes any difference. It does the trick for showing the modal I created

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

Arun P Johny · Accepted Answer · 2015-08-17 07:53:36Z

3

this inside the createModal does not refer to the clicked element, so your script won't work.

You need to pass the clicked element reference to createModal

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

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

}

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

answered Aug 17, 2015 at 7:53

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeff Over a year ago

Thanks this fixed my problem.

Alexandru Severin Over a year ago

@Anomaly if it fixed your problem consider accepting the answer by clicking the green check mark below the rating.

Pranav C Balan · Accepted Answer · 2015-08-17 08:00:13Z

You can use data() method to access custom data attributes. If you need to access this inside the function then pass the this instance as a parameter.

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

Or

$(".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">

Yo need to use fullsizeimg in lower

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.

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

There are two ways of solving this:

pass this as an argument in the called function.
take advantage of event arguement.

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(); 
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 17, 2015 at 8:00

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Jeff Over a year ago

I definitely appreciate the different approach. I am new here so not sure how it works if you can have multiple correct answers I feel all of you have answered it for me.

Alexandru Severin · Accepted Answer · 2015-08-17 07:57:39Z

0

An alternative way to previous answers is this:

createModal.call(this);

Now in function createModel, this is inherited from the caller function and you may use $(this) as a reference.

answered Aug 17, 2015 at 7:57

Alexandru Severin

6,44812 gold badges54 silver badges79 bronze badges

Collectives™ on Stack Overflow

How to target a html5 data attribute with jQuery?

4 Answers 4

2 Comments

Comments

1.

2.

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1.

2.

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related