Checking Id of clicked element

Question

I have several images with the same class and would like to set up a click function that changes the text in some elements based on which image is clicked. My if statement is not working, I'm not entirely sure why because I've used this method before, or so I thought.

$('.gallery_image').click(function(e) {
    var t = $(this);
    if(t.id == 'csf') {
        console.log('It works!');
    }
});

JSFIDDLE

if(t[0].id == 'csf')... t is jQuery object, and it doesn't have id property...https://jsfiddle.net/4qdh47ck/1/ console.log t to see why this works.... — sinisake, Dec 14 '16 at 21:39

score 6 · Accepted Answer · answered Dec 14 '16 at 21:39

6

Use t.attr('id') instead of t.id

More about .attr()

answered Dec 14 '16 at 21:39

Soufiane Hassou

17,257
2
39
75

7

Or use `if(this.id == 'csf')` instead. – connexo Dec 14 '16 at 21:43

score 0 · Answer 2 · answered Dec 14 '16 at 22:29

An alternate solution is using classes instead of id's. Call the click function on the class they share then use a second class to distinguish them with the hasClass function:

 <div id="csf" class="gallery_image csf">csf</div>
<div id="csi" class="gallery_image csi">csi</div>

    $('.gallery_image').click(function(e) {
    var t = $(this);
    if(t.hasClass('csf')) {
        alert("It works!");
    }

     else if(t.hasClass('csi')) {
        alert("So does this!");
    }
});

Checking Id of clicked element

2 Answers2