使用 .on() 方法根据不同的选择器执行不同的操作的 JQuery。

Question

我有几个不同的任务可能需要进行一些优化：

$('.container').on('click', '.one', function () {
  // do task one
});

$('.container').on('click', '.two', function () {
  // do task two
});

$('.container').on('click', '.three', function () {
  // do task three
});

合并到以下内容中：

$('.container').on('click', '.one, .two, .three', function () {
  // How to selectively perform each task, based on the trigger/ selector?
  // Think of if (event.type === 'mouseenter') // do sumthing
});

问题是如何根据每个触发器/选择器有选择地执行不同的任务？还是有更好的方法来执行这个任务？谢谢。

- swan

---

我不明白为什么你建议使用 if (event.type === 'mouseenter')，如果想要更改上面代码中的任务是元素，而不是事件。你只有点击事件。 - Diego

只是一个关于选择性触发的例子，谢谢。 - swan

Answer 1

更好的方法可能只是链接.on()调用：

$('.container').on('click', '.one', function () {
    // do task one
}).on('click', '.two', function () {
    // do task two
}).on('click', '.three', function () {
    // do task three
});

采用这种方式可以消除每次事件处理程序触发时需要检查元素是否具有某个类的额外处理。

- James Allardice

---

更不用说看起来更加优雅。 - Esailija

喜欢它。但不好的一面是，每个没有直接绑定到其元素的事件都有一些成本。这样，每次单击容器中的某个元素时，jQuery 都会询问该元素是否为 '.one'、'.two' 或 '.three'。唯一的区别是我们看不到它。 - Diego

Answer 2

$('.container').on('click', '.one, .two, .three', function () {
  if ($(this).hasClass("one")) {
    // do task one
  }
  if ($(this).hasClass("two")) {
    // do task two
  }
  if ($(this).hasClass("three")) {
    // do task three
  }
});

- Diego

---

这里的$(this)指代选择器的每个迭代吗？谢谢。 - swan

$(this) 指的是被点击的元素。 - Diego

@roasted，不应该。问题没有指定元素只能有一个类！ - Diego

Answer 3

你可以使用 hasClass 方法：

$('.container').on('click', '.one, .two, .three', function () {
  var $this = $(this);
  if ($this.hasClass('one')) {
     // 
  } else if ($this.hasClass('two')) {
     //
  } else {
    //
  }
});

- Ram

---

如果某个元素有多个类，这段代码将与原始代码的行为不同。 - Diego