Question

当我执行以下代码时，我希望相同的元素id被警告两次，而第一个是正确的，而第二个总是显示集合中第一个元素的名称。

$("div.someClass").each(function (index) {
  $(this).click(function () {
    alert($(this).attr("id")); // Here i get the actually clicked element
    $.when($("div.someClass").animate({ }, 0)).then(function () {
      alert($(this).attr("id")); // Here i get the first element in of that class
    });
  });
});

为什么会这样？怎么解决？我已经尝试将元素的名称传递给函数但它不起作用。

Answer 1

将$(this)保存在某个变量中，例如that，然后在animate中使用

$("div.someClass").each(function (index) {
  $(this).click(function () {
    alert($(this).attr("id")); // Here i get the actually clicked element
    var that = $(this);
    $.when($("div.someClass").animate({ }, 0)).then(function () {           
      alert(that.attr("id")); // Here i get the first element in of that class
      alert($(this).attr("id")); 
    });
  });
});

Answer 2

每个函数调用都会自动更改this的值。因此，除非多个函数调用密谋通过传递它来故意保留this的特定值，然后在调用回调之前使用.apply()或.call()进行设置，否则它将会有所不同。 Javascript符合这些规则：

如果进行方法调用，则this的值将设置为其方法的对象。
如果进行正常的函数调用，this将设置为全局对象（通常为window）。
如果您使用fn.apply()或fn.call()，则会根据第一个参数设置this。

最简单的解决方案是将this的值保存在局部变量中，然后引用它。

$("div.someClass").each(function (index) {
  var self = $(this);
  self.click(function () {
    alert(self.attr("id")); // Here i get the actually clicked element
    $.when($("div.someClass").animate({ }, 0)).then(function () {
      alert(self.attr("id")); // Here i get the first element in of that class
    });
  });
});

Answer 3

您需要访问每个函数的元素：http://api.jquery.com/each/

$("div.someClass").each(function (index, element) {
  $(element).click(function () {
    var $this = $(this);
    alert($this.attr("id")); // Here i get the actually clicked element
    $.when($("div.someClass").animate({ }, 0)).then(function () {
      alert($this.attr("id")); // Here i get the first element in of that class
    });
  });
});

还有助于了解“this”的含义：https://developer.mozilla.org/en/JavaScript/Reference/Operators/this jQuery可能会混淆你对“this”应该是什么以及它为事件处理所做的所有上下文的理解。

使用each和function的jQuery中$（this）的意外范围

3 个答案: