Question

我在理解变量范围时遇到了问题。我在下面举例说明了我的问题。假设我有一堆带有.btn类的div，并且每个都有一个存储在data-id中的唯一ID。

当单击div时，我想调用myFunction并传入一个字符串，因此可以在函数中使用它。我遇到的问题是，当我根据click函数的$（this）在函数中定义一个我希望成为条件的变量时，被调用的函数说它没有定义

我知道它在被调用的函数中没有定义，但我不知道如何解决这个问题

请参阅codepen：http://codepen.io/anon/pen/rlFyu

function myFunction(data) {
  var a = $(this).attr('data-id');
  console.log(a);
  return data;
}


$('.btn').click(function(){
  myFunction('variable');
});

Answer 1

由于您已使用this直接致电window，因此myFunction范围内的myFunction为"variable"。由于this是window对象，因此它没有名为data-id的属性，这就是您获得undefined的原因。

要解决此问题，您可以在调用this时明确设置myFunction，如下所示：

$('.btn').click(function(){
    myFunction.call(this, 'variable');
});

我不确定您为什么要返回传入的参数，但是如果采用这种方法，您应该能够使用return中的myFunction将其恢复。< / p>

Answer 2

$(this)仅在您作为jQuery方法的一部分调用的函数中使用它时才有效。如果你在一个独立的＆＃34;中使用它？函数如myFunction，它将以未定义的形式返回（因为myFunction的范围是window，而不是调用它的jQuery元素。）

您可以创建一个变量来存储$(this)的值，然后将其传递给myFunction：

function myFunction(data, target) {
  var a = target.attr('data-id');
  console.log(a);
  return data;
}

$('.btn').click(function(){
  var target = $(this);
  myFunction('variable', target);
});

或者，如果您不需要从其他任何地方调用myFunction，您可以跳过中间人并将它们合并：

$('.btn').click(function(){
  var a = $(this).attr('data-id');
  alert(a);
});

然后你可以使用$（this）并节省空间。

理解JQuery变量范围

2 个答案: