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

时间:2013-05-07 07:15:15

标签: this jquery

我想知道jquery boolean toggle函数中的“this”是什么。我在jQuery元素列表上调用切换时运行了一些测试,它不是nullunderfined,它不是window,它不是jQuery对象或dom元素。 / p>

有什么想法吗?

编辑:说这是我的HTML

<div x="a">some div</div>
<div x="b">some div</div>

我希望能做到这样的事情:

$('div').toggle(this.attributes['x'].value == 'a');

3 个答案:

答案 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);

arg1arg2的值取决于您调用函数的上下文。您知道:在给定时刻(当您决定调用该函数时)arg1arg2是什么。

在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'。它会产生truefalse
  • 然后将使用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对象。

请注意,alertthis的值没有影响。当您编写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对象。

我希望这会有所帮助。