Несколько селекторов: определить триггер?

Question

Вот очень маленькая проблема, которую я не смог выяснить.Я уверен, что кто-то может ответить в кратчайшие сроки:

Имея несколько селекторов, таких как

$('a.button, span.xyz, a.another').click(function(e) {
   var clicked_element = ???;
});

, как я могу выяснить, какой селектор был фактически нажат?Мне нужно использовать его как $(clicked_element)....

Спасибо.

Answer 1

С помощью $ (this) вы получите элемент, по которому щелкнули ... а использование is () может помочь вам определить, по чему щелкнули.

$('a.button, span.xyz, a.another').click(function(e) {
   if ($(this).is("a.button")) {
     alert("a.button was clicked");
   } else if ($(this).is("span.xyz")) {
     alert("span.xyz was clicked");
   } else if($(this).is("a.another")) {
     alert("a.another was clicked);
   }
});

---

Отредактировано:

Когда я написал этот ответ, кажется, что есть лучший подход.Комментарий Патрика DW меня заинтриговал, и я хотел узнать больше.Его разъяснение здесь jQuery - Проблемы с объединением селекторов в одном обработчике событий

Это был бы лучший подход

$("a.button").click(function (e) { ... });
$("span.xyz").click(function (e) { ... });
$("a.another").click(function (e) { ... });

Как я понимаю, если ваша цель былачтобы разместить общую функциональность в одном месте, то вот как это должно быть обработано

function commonFunctionality(elementSelector) {
   // common code for all elements here or at the end

   switch (elementSelector) {
     case "a.button":
       //do stuff for a.button only;
       break;
     case "span.xyz":
       //do stuff for span.xyz only;
       break;
     case "a.another":
       //do stuff for a.another only;
       break;
   }

   // common code for all elements
}


$("a.button").click(function (e) { ... });
$("span.xyz").click(function (e) { ... });
$("a.another").click(function (e) { ... });

Answer 2

Элемент, который запускает событие, доступен внутри функции как $(this), то есть

$('a.button, span.xyz, a.another').click(function(e) {
   var clicked_element = $(this);
});

Вы также можете проверить, соответствует ли элемент определенному селектору, используя is () :

if ($(this).is('a.button'))) { ... }

Answer 3

Я бы согласился с Патриком и Декстером о разделении этих элементов, если они имеют разные функциональные возможности.Но если вы собираетесь использовать этот метод, попробуйте использовать некоторые из встроенных методов javascript.Я не знаю, как выглядит HTML-разметка, но при условии, что эта разметка, вы можете попробовать скрипт ниже:

<a class="button" href="http://somesite.com">Some Site</a>
<span class="xyz">span</span>
<a class="another" href="/topics/topic2.html">Topic 2</a>

$('a.button, span.xyz, a.another').click(function(e) {
   var clicked = 'a.another';
   if (this.tagName == "SPAN") { clicked = 'span.xyz'; }
   if (this.href.match('somesite')) { clicked = 'a.button'; }
   // Do something
});