jquery - JQuery 使用 .on() 方法根据不同的选择器做不同的事情

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

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

谢谢

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

这样做会消除每次触发事件处理程序时检查元素是否具有特定类所需的额外处理。

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

Answer 3

您可以使用hasClass方法：

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