Несколько переключателей на функции щелчка, как узнать, какой селектор был нажат?

Question

новый JQuery здесь. У меня есть четыре селектора в функции щелчка, см. Код ниже, это потому, что я хочу, чтобы один и тот же эффект происходил на всех из них при нажатии, вместо того, чтобы делать функцию щелчка для всех четырех селекторов. Однако при щелчке я хочу, чтобы функция определяла, какой селектор был нажат, поэтому я могу выполнить действие над одним из селекторов, поэтому я использую id вместо класса. Точнее, я хочу установить CSS на кликвом селекторе на более высокое значение z-index, чтобы он не был вызван эффектом, который будет иметь место, в этом случае я хочу, чтобы селектор с щелчком имел значение z-index из 10.

Я попытался использовать оператор if, см. ниже, но он не работает, кто-нибудь знает, как это сделать?

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

Моя JQuery попытка:

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

}); 
}); 

Answer 1

Вы можете просто использовать this в пределах вашего click обратного вызова, чтобы определить щелкнул элемент:

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

Однако для того, чтобы заставить его работать, вы не нужны идентификаторы использования. Это гораздо лучше использовать один общий класс вместо идентификаторов, если это возможно:

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

И в 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"); 
     } 
    }); 
}); 

Обратите внимание, что существует не так много смысла в вашем if ($(this).data('clicked')) состоянии. Поскольку вы установили clicked в true прямо перед состоянием, оно всегда будет true.

Answer 2

Использование 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"); 
    } 

}); 
}); 

Редактировать на основе @Spencer Wieczorek комментарий, если вы хотите клике вход, чтобы иметь z-index из 10, то:

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

Answer 3

Использование this ключевое слово:

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

}); 
}); 

Answer 4

Может быть, это поможет вам, или вы можете также использовать переключатель случай

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

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

}); 

ИЛИ

Answer 5

Вам не нужно добавлять идентификаторы всех дивы только к г-индекса один, а затем с помощью JQuery attr() функция

чтобы получить идентификатор текущего щелкнули пункт ($(this) относится к curent щелкнули пункт) и добавьте Z-индекс, если условие истинно попробуйте следующее:

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

    }); 
    }); 

см. Jsfiddle: https://jsfiddle.net/596w1hwr/