理解JQuery变量范围

时间:2014-07-11 22:27:38

标签: jquery function variables

我在理解变量范围时遇到了问题。我在下面举例说明了我的问题。假设我有一堆带有.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');
});

2 个答案:

答案 0 :(得分:0)

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

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

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

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

答案 1 :(得分:0)

$(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)并节省空间。