0

我想知道 jquery 布尔切换函数中的“this”是什么。在 jQuery 元素列表上调用切换时，我运行了一些测试，它不是nullor underfined，它不是window，它不是 jQuery 对象或 dom 元素。

有任何想法吗？

编辑：说这是我的 HTML

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

我希望做这样的事情：

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

3 回答 3

0

我不确定你在说哪个切换功能，但我假设它是一个有某种回调函数的功能，所以这个问题是有道理的。

文档中有 3 个适用的重载：

.toggle( [duration ] [, complete ] )

和

.toggle( duration [, easing ] [, complete ] )

并且

.toggle( options )

如在options有一些回调函数。

如果您在 jQuery 列表中调用它们中的任何一个，例如：

$('ul li').toggle(400, function() {});

它基本上在列表的每个元素上调用切换，并且回调函数也会在每个元素上调用。

在每个回调函数this中，都是调用切换的 DOM 元素之一。在上面的示例中，它将是一个HTMLLIElement.

我为你做了一个小提琴来证明这一点。

如果您的问题是其他问题，请澄清。

编辑：

在接受的答案下看到您的评论，您似乎有一个巨大的误解！

你的代码是：

$('div').toggle(this == body);

在此语法this来自 CONTEXT。

您的小提琴已设置为onLoad事件，因此它将成为window对象。

如果你在jQuery 就绪回调函数中编写它（将 jsfiddle 设置为 onDomready），它将是document对象。

这与切换功能无关。在每一种类 C 语言中，调用带参数的函数都是这样的：

myFunction(arg1, arg2);

arg1和的值arg2取决于调用函数的上下文。你知道：什么是arg1和arg2在给定的时刻（在你决定调用函数的那一刻）。

在 JavaScriptthis中，始终是调用您所在的当前函数的对象。

在你的小提琴body中也是未定义的！那里没有调用变量body，所以调用$('div').toggle(this == body);会抛出一个ReferenceError.

编辑2：

你想做的很简单：

代替：

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

写：

$('div').each(function () {
    var $this = $(this);
    var attrx = $this.attr('x');
    $this.toggle(attrx == 'a');
});

在的回调函数中是您正在迭代的当前 DOM 元素。.each() this

编辑3：

回复您对此答案的第一条评论：

你的问题本身没有意义。我试图在我的第一次编辑中解释它，看来我失败了。我认为您对 jQuery 语法感到困惑，或者我不知道。让我再次尝试解释一下：

任何 jQuery 函数（如.toggle()）最后都只是一个简单的函数。它只是 jQuery 集合对象的一个​​函数。所以这两条线的工作方式类似：

console.log(this.attributes['x'].value == 'a');
$('div').toggle(this.attributes['x'].value == 'a');
  • 首先，计算表达式this.attributes['x'].value == 'a'。这将导致trueor false。
  • 然后该函数将被调用为真或假。

这将导致与上面的 2 行相同：

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

this我已经从该功能中移出，.toggle()但它是相同的。this完全独立于.toggle()功能！

在 JavaScript 中，this关键字来自上下文：

  • 如果是全局上下文（您不在函数中），则值this将与window（当然如果您在浏览器中使用 JavaScript）相同。
  • 如果它是一个函数上下文（你在一个函数中），值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");被评估！在这种情况下，唯一的参数是which 将被评估为。比将被称为。this.name + " is currently honking""Ford Model T is currently honking"alertalert("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对象。

我希望这会有所帮助。

于 2013-05-07T08:04:33.970 回答
0

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

$("body").toggle();

源代码 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 => 常规 jQuery 上下文，如您所料，Chrome 调试器检查器输出：

0: body
context: document
length: 1
prevObject: jQuery.fn.jQuery.init[1]
selector: "body"

2 => 迭代的、普通的 DOM 元素，在本例中为主体
3 => 与 2 相同，但由于它被传递给 jQuery，因此您将其转换为 jQuery 对象并再次使所有方法可用。

于 2013-05-07T07:46:40.613 回答
0

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

$('#abc').click(function(){ 
    $(this) // this means the current element same as $('#abc') 
})
于 2013-05-07T07:23:56.643 回答