多个选择器：确定触发选择器？

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

---

编辑：

当我写下这个答案时，似乎有更好的方法。 Patrick DW 的评论引起了我的兴趣，我想了解更多。他的澄清在这里 jQuery - 在 a 中组合选择器的问题单个事件处理程序

这将是一种更好的方法

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