Multiple selectors on click function, how to know which selector was clicked?

Question

new to Jquery here. I have four selectors on a click function, see code below, this is because I want the same effect happening on all of them when clicked, instead of making a click function for all four selectors. However, when clicked I want the function to identify which selector was clicked so I can perform an action on one of the selectors, this is why I use id's instead of a class. More precise, I want to set the CSS on a clicked selector to a higher z-index value so it will not be effected by the effect that will be taking place, in this case I want the clicked selector to have an z-index value of 10.

I tried using a if statement, see below, but it's not working, anyone know how to do this?

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

My jQuery attempt:

$(document).ready(function(e) {

var effect = $("#slide");

$("#1, #2, #3, #4").click(function() {

    effect.animate({width: "1100px"}, 200, "easeOutQuint");
    $("#2").data('clicked', true);

    if ($("#2").data('clicked')) {
       $("#2").css("z-index", "10");
    }

});
});

Use `this` to refer to element whicn invoked the handler – Satpal Dec 04 '15 at 09:00 — Satpal, Dec 04 '15 at 09:00

Yeldar Kurmangaliyev · Answer 1 · 2015-12-04T09:12:47.270

You can simply use this within your click callback to determine the clicked element:

$("#1, #2, #3, #4").click(function() {
    effect.animate({width: "1100px"}, 200, "easeOutQuint");
    $(this).data('clicked', true);

    if ($(this).data('clicked')) {
        $(this).css("z-index", "10");
    }
});

However, in order to make it work, you don't need use IDs. It is a much better idea to use one common class instead of IDs if possible:

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>

And in JavaScript:

$(document).ready(function(e) {
    var effect = $("#slide");

    $(".myClass").click(function() {
        effect.animate({width: "1100px"}, 200, "easeOutQuint");
        $(this).data('clicked', true);

        if ($(this).data('clicked')) {
           $(this).css("z-index", "10");
        }
    });
});

Note that there is not much sense in your if ($(this).data('clicked')) condition. Since you set clicked to true right before condition, it will always be true.

They aren't invalid in HTML5, it's also not necessary for them to be classes (*I recommend clarifying that it's a better idea to use classes*). — Spencer Wieczorek, Dec 04 '15 at 09:05

score 1 · Answer 2 · answered Dec 04 '15 at 09:02

Use this keyword:

$(document).ready(function(e) {

var effect = $("#slide");

$("#1, #2, #3, #4").click(function() {

    effect.animate({width: "1100px"}, 200, "easeOutQuint");
    $(this).data('clicked', true);

    if ($(this).data('clicked')) {
       $(this).css("z-index", "10");
    }

});
});

AVAVT · Answer 3 · 2015-12-04T09:15:17.420

Use event.target:

$(document).ready(function(e) {

var effect = $("#slide");

$("#1, #2, #3, #4").click(function(event) {

    effect.animate({width: "1100px"}, 200, "easeOutQuint");
    $("#2").data('clicked', true);

    if($(event.target).attr("id") == "2" ){
       $("#2").css("z-index", "10");
    }

});
});

Edit based on @Spencer Wieczorek comment, if you want the clicked input to have a z-index of 10 then:

$(document).ready(function(e) {

var effect = $("#slide");

$("#1, #2, #3, #4").click(function(event) {

    effect.animate({width: "1100px"}, 200, "easeOutQuint");
    $("#2").data('clicked', true);

    $(event.target).css("z-index", "10");
});
});

*" I want the clicked selector to have an z-index value of 10"* — Spencer Wieczorek, Dec 04 '15 at 09:08

score 0 · Answer 4 · answered Dec 04 '15 at 09:03

0

May be this will help you or you can also use switch case

$("#1, #2, #3, #4").click(function() {

if($(this).attr("id") == "1"){
//do sth
}else if($(this).attr("id") == "2"){
//do sth
}else{
//
}

});

OR

answered Dec 04 '15 at 09:03

blin2linkme

119
5

That method would be really redundant in this case. – Spencer Wieczorek Dec 04 '15 at 09:09

madalinivascu · Answer 5 · 2015-12-04T09:15:51.327

You don't need to add ids to all the divs only to the z-index one and then use the jquery attr() function

To get the id of the current clicked item ($(this) refers to the curent clicked item) and add the z-index if condition is true try this:

<div></div>
<div id="zindex"></div>
<div></div>
<div></div>


   $(document).ready(function(e) {

    var effect = $("#slide");

    $("div").click(function() {

        effect.animate({width: "1100px"}, 200, "easeOutQuint");
        if ($(this).attr('id') == "zindex") {
           $(this).css("z-index", "10");
        }

    });
    });

see jsfiddle:https://jsfiddle.net/596w1hwr/

Multiple selectors on click function, how to know which selector was clicked?

5 Answers5