我想知道jquery boolean toggle函数中的“this”是什么。我在jQuery元素列表上调用切换时运行了一些测试,它不是null
或underfined
,它不是window
,它不是jQuery对象或dom元素。 / p>
有什么想法吗?
编辑:说这是我的HTML
<div x="a">some div</div>
<div x="b">some div</div>
我希望能做到这样的事情:
$('div').toggle(this.attributes['x'].value == 'a');
答案 0 :(得分:0)
通常这指的是jquery中的当前元素,例如
$('#abc').click(function(){
$(this) // this means the current element same as $('#abc')
})
答案 1 :(得分:0)
您应该在测试方案中提供更多信息。我用了一个简单的
$("body").toggle();
exprt形成了源代码1.9.1
toggle: function( state ) {
var bool = typeof state === "boolean";
return this.each(function() { //1
if ( bool ? state : isHidden( this ) ) {//2
jQuery( this ).show();//3
} else {
jQuery( this ).hide();
}
});
}
使用Chrome浏览功能时,这就是我的内容
1 =&gt;正如您所期望的那样,Chrome调试器检查器输出:
0: body
context: document
length: 1
prevObject: jQuery.fn.jQuery.init[1]
selector: "body"
2 =&gt;迭代的普通DOM元素,在这种情况下为body 3 =&gt;与2相同,但由于它被传递给jQuery,因此将其转换为jQuery对象并再次使用所有方法。
答案 2 :(得分:0)
我不确定你在谈论哪种切换功能,但我认为它是一种存在某种回调功能的功能,所以问题才有意义。
documentation中有3个重载适用:
.toggle( [duration ] [, complete ] )
和
.toggle( duration [, easing ] [, complete ] )
以及
.toggle( options )
在options
中有一些回调函数。
如果你在jQuery列表中调用它们中的任何一个,例如:
$('ul li').toggle(400, function() {});
它基本上会调用列表中每个元素的切换,并且还会在每个元素上调用回调函数。
在每个回调函数中,this
是调用toggle的DOM元素之一。在上面的示例中,它将是HTMLLIElement
。
我为你证明了这一点fiddle。
如果你的问题是别的,请澄清一下。
修改强>:
根据接受的答案看到您的评论,您似乎有一个巨大的误解!
您的代码是:
$('div').toggle(this == body);
在这种语法中,this
来自上下文。
您的小提琴设置为onLoad
事件,因此它将是window
对象。
如果你在jQuery ready回调函数中编写它(将jsfiddle设置为onDomready),它将是document
对象。
这与切换功能无关。在每个类C语言中,使用参数调用函数类似于:
myFunction(arg1, arg2);
arg1
和arg2
的值取决于您调用函数的上下文。您知道:在给定时刻(当您决定调用该函数时)arg1
和arg2
是什么。
在JavaScript this
中始终是调用当前函数的对象。
同样在你的小提琴中body
未定义!那里没有名为body
的变量,因此调用$('div').toggle(this == body);
会抛出ReferenceError
。
<强> EDIT2 强>:
您想要做的事情很简单:
而不是:
$('div').toggle(this.attributes['x'].value == 'a');
写:
$('div').each(function () {
var $this = $(this);
var attrx = $this.attr('x');
$this.toggle(attrx == 'a');
});
在.each()
this
的回调函数中,是您正在迭代的当前DOM元素。
<强> EDIT3 强>:
回复您对此答案的第一条评论:
你的问题本身没有意义。我试图在我的第一次编辑中解释它,似乎我失败了。我认为你对jQuery语法感到困惑,或者我不知道。让我试着再解释一下:
任何jQuery函数(如.toggle()
)最后都只是一个简单的函数。它只是jQuery集合对象的一个功能。所以这两行的工作方式类似:
console.log(this.attributes['x'].value == 'a');
$('div').toggle(this.attributes['x'].value == 'a');
this.attributes['x'].value == 'a'
。它会产生true
或false
。这将导致与上面两行相同:
var preCalculate = this.attributes['x'].value == 'a';
console.log(preCalculate);
$('div').toggle(preCalculate);
我已从this
功能移出.toggle()
但它是相同的。 this
完全独立于.toggle()
函数!
在JavaScript中,this
关键字来自上下文:
this
的值将与window
相同(如果您在浏览器当然)。this
的值将是调用该函数的对象!它被调用的对象是什么?
例如,如果你写:
car.honk();
您正在调用.honk()
对象上的car
函数。
您可能已经将此对象设为:
var car = {
name: "Ford Model T",
honk: function () {
alert(this.name + " is currently honking");
}
};
之后你可以打电话:
car.honk(); // this alerts "Ford Model T is currently honking"
这是因为您在.honk()
对象上调用了car
。因此,.honk()
函数this
内部被评估为car
对象。
请注意,alert
对this
的值没有影响。当您编写alert(this.name + " is currently honking");
时,函数的参数在函数被调用之前被评估!在这种情况下,唯一的参数是this.name + " is currently honking"
,它将被评估为"Ford Model T is currently honking"
。将alert
称为alert("Ford Model T is currently honking");
。
假设您改变了这样的车:
var car = {
name: "Ford Model T",
honk: function () {
$('div').toggle(this.attributes['x'].value == 'a');
}
};
会发生什么?它会抛出异常,因为car
对象没有名为attributes
的属性! this
仍然是car
对象。
我希望这会有所帮助。