了解悬停中的切换

Question

我发现这段代码片段允许我根据所讨论的ID是否被悬停而淡化到某个值。但是，我无法理解有问题的代码段的一部分，并希望澄清。

这是代码段：

$(document).ready(function() {

$(document).ready(function () {
    $("#food-roulette").hover(function () {   
        this.toggle = !this.toggle;      
        $("#food-roulette").stop().fadeTo(100, this.toggle ? 0.4 : 1);
    });
});   
}); 

我有两个问题。

1）什么是切换？这是JQuery库中的布尔变量吗？它是如何使用的。

2）this.toggle = !this.toggle。这条线让我感到困惑。根据我的假设，切换最初是正确的，只要我将鼠标悬停在按钮上，切换就会设置为false，因此通过三元操作，按钮不透明度应为1，但它为0.4。所以从某种意义上说，它正在逆向工作。如果我将this.toggle = !this.toggle行放在$("#food-roulette").stop().fadeTo(100, this.toggle ? 0.4 : 1);之后，那么它会在按钮褪色的情况下反向工作，直到我将鼠标悬停在它上面。

所以有人可以向我解释这些方面的逻辑以及为什么它的工作方式。非常感激。

Answer 1

this.toggle是一个未定义的变量。一旦this.toggle =！this.toggle被调用，它基本上就说：undefined =！undefined，结果为true。这个悬停第一次被调用时，它因此渐渐变为0.4

您可以打开Chrome开发者工具（f12），查看控制台，然后点击＆gt;来自行检查。提示输入this.toggle - 你会看到undefined。输入this.toggle =！this.toggle后，你会看到真的。