Verständnis Toggle in Hover

Question

Ich fand dieses Code-Snippet, das mir erlaubt, zu einem bestimmten Wert zu verblassen, je nachdem, ob die betreffende ID über oder nicht schwebte. Ich habe jedoch Schwierigkeiten, einen Teil des fraglichen Codeausschnitts zu verstehen, und möchte dies bitte erläutern.

Dies ist der Code-Schnipsel:

$(document).ready(function() { 

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

ich zwei Fragen haben.

1) Was ist Toggle? Ist das eine boolesche Variable in der JQuery-Bibliothek? Wie soll es verwendet werden?

2) this.toggle = !this.toggle. Diese Linie verwirrte die Hölle aus mir heraus. Unter meiner Annahme ist toggle zunächst wahr, und sobald ich den Mauszeiger über die Schaltfläche halte, wird toggle auf false gesetzt, also sollte bei der ternären Operation die Schaltfläche opacity 1 sein, aber stattdessen 0.4. In gewisser Weise funktioniert es umgekehrt. Wenn ich die this.toggle = !this.toggle Zeile nach der $("#food-roulette").stop().fadeTo(100, this.toggle ? 0.4 : 1); stelle, dann funktioniert es in umgekehrter Richtung, wo die Schaltfläche verblasst ist, bis ich darüber schwebe.

So kann mir jemand die Logik in diesen Zeilen erklären und warum es so funktioniert wie es tut. Sehr geschätzt.

Answer 1

this.toggle ist eine undefinierte Variable im Zusammenhang damit. Sobald this.toggle =! This.toggle aufgerufen wird, heißt es im Grunde: undefined =! Undefined, was zu true führt. Wenn dieser Hover zum ersten Mal aufgerufen wird, wird er daher auf 0,4

eingeblendet. Sie können dies selbst überprüfen, indem Sie die Chrome-Entwicklertools (f12) öffnen, die Konsole anzeigen und dann an der Eingabeaufforderung> in this.toggle - Du wirst sehen, undefiniert. Nachdem Sie this.toggle =! This.toggle eingegeben haben, sehen Sie true.