adding a click event to an image based on having data attributes

Question

I have the following images:-

<img rel="item-1" src="1.gif"/>
<img rel="item-2" src="2.gif"/>
<img rel="item-3" src="3.gif"/>

and at the moment I can use Jquery to attach a click event to each image like so:-

$("img[rel^='item']").click(function () {
    var img = $(this);
});

Suppose I want to use the data attribute and remove the rel attribute:-

<img data-thumb="item-1" src="1.gif"/>
<img data-thumb="item-2" src="2.gif"/>
<img data-thumb="item-3" src="3.gif"/>

What would my jquery look like to attach a click event to each image that has the data-thumb attribute?

EDIT Sorry guys it is the same, like an idiot I forgot to change this in my code:-

var url = img.attr('rel'); to var url = img.data('thumb');

I feel ashamed!

James Donnelly · Accepted Answer · 2013-02-20 14:26:31Z

2

It's the same :)

$("img[data-thumb^='item']").click(function () {
    var img = $(this);
});

answered Feb 20, 2013 at 14:26

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

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

Comments

Barney · Accepted Answer · 2013-02-20 14:26:35Z

1

You replace rel in your selector with data-thumb:

$("img[rel^='item']").click(function () {
    var img = $(this);
});

becomes

$("img[data-thumb^='item']").click(function () {
    var img = $(this);
});

answered Feb 20, 2013 at 14:26

Barney

16.5k5 gold badges66 silver badges80 bronze badges

Comments

sdespont · Accepted Answer · 2013-02-20 14:26:39Z

1

Simply :

$("img[data-thumb^='item']").click(function () {
    var img = $(this);
});

answered Feb 20, 2013 at 14:26

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

Comments

Enrique Moreno Tent · Accepted Answer · 2013-02-20 14:26:39Z

1

Doesnt the same work?

$("img[data-thumb^='item']").click(function () {
    var img = $(this);
});

answered Feb 20, 2013 at 14:26

Enrique Moreno Tent

25.6k35 gold badges110 silver badges195 bronze badges

Collectives™ on Stack Overflow

adding a click event to an image based on having data attributes

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related