Question

我想知道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');

Answer 1

通常这指的是jquery中的当前元素，例如

$('#abc').click(function(){ 
    $(this) // this means the current element same as $('#abc') 
})

Answer 2

您应该在测试方案中提供更多信息。我用了一个简单的

$("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对象并再次使用所有方法。

Answer 3

我不确定你在谈论哪种切换功能，但我认为它是一种存在某种回调功能的功能，所以问题才有意义。

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。

然后将使用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对象。

我希望这会有所帮助。

jquery boolean toggle中的“this”是什么？

3 个答案: