Question

我来这里是一个很简单的问题（我想）。对不起，如果它是重复但我在其他地方找不到这个问题。

我只想知道选择多个元素时选择器选择了哪个元素。

例如：

$('body').on('click', '.add, .remove', function() {
    // if $(this) is a .add element, do something
    // if $(this) is a .remove element, do another thing
}

我显然可以创建两个函数，但这两个函数会非常长且非常相似，所以我不想这样做。

我测试了$(this).is($('.add))，$(this).hasClass('add')，但两者都没有效果。

我也尝试过这样的事情：

$('body').on('click', '.add', foo('add'));
$('body').on('click', '.remove', foo('remove'));

function foo(which) {
    if (which == 'add')
        // do something
    else
        // do something
}

但是我遇到了奇怪的行为（当我不调用它时会调用该函数等）。我想我并不完全理解定义的函数在Javascript中是如何工作的。

你能帮我吗？

Answer 1

我认为你可以修改你的最后一种方法......当你应该给出一个函数名时，麻烦就是调用函数。你可以像这样解决它：

$('body').on('click', '.add', function() {foo('add');});
$('body').on('click', '.remove', function() {foo('remove');});

function foo(which) {
    if (which == 'add')
        // do something
    else
        // do something
}

Answer 2

.on()接受引用到回调函数，您传入调用：

$foo.on('click', bar); // bar is called on click
$foo.on('click', bar()); // the *result* of calling bar is called on click

第二种方法没有任何错误，因为bar()可以是一个返回函数的函数（使这个(function_returned_from_bar)()，它不是你需要的。你过滤选择器的方法来自身体是好的和合法的，所以我在我提出的解决方案中建立了它。你可以阅读event.data - in the docs上发生的事情。

$('body').on('click', '.add', {method: 'add'}, foo);
$('body').on('click', '.remove', {method: 'remove'}, foo);

function foo(event) {

  // could also use switch/case
  if (event.data.method === 'add') {
    $('.log').append('Added<br>');
  } else {
    $('.log').append('Removed<br>');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add">
  Add
</button>

<button class="remove">
  Remove
</button>

<div class="log"></div>

Answer 3

您选择以奇怪的方式添加和删除，我想我可能会导致不当行为试试这个：

$('.add').on('click',  foo('add'));
$('.remove').on('click', foo('remove'));

 function foo(which) {
   if (which == 'add')
      // do something
  else
      // do something else
}

检查选择器选择了哪个元素

3 个答案: