‘questo’ non funziona correttamente in un altro evento. Non ho capito perché

Breve storia, non so perché non funziona, ho provato Console.Log () per capire che cosa è questo e l’evento continua a passare la finestra. È un evento click che supponiamo di triggersre effetti su una certa figura in questo carosello, motivo per cui non posso solo cercare individualmente per class (almeno per quanto ne so). Qualche correzione dal più intelligente?

var carFigure = null; //----------The Events $('.figure').click(toggleCarousel(this)); //$('.figure').mouseover(stopCarousel(this)); //$('.figure').mouseleave(startCarousel(carFigure)); //------------Switcharoo function function toggleCarousel(event) { var bool = false; console.log(event) if (bool) { stopCarousel(event); bool = false; } else { startCarousel(event); bool = true; } } //----------The action functions function stopCarousel(e) { if (carFigure != null) { document.getElementById('carousel').style.animationPlayState = "paused"; var p = e.parentElement; var a = p.getElementsByTagName('DIV')[2]; if (a.getElementsByTagName('IMG')[0].style.transform = "none") { a.getElementsByTagName('IMG')[0].style.transform = "scale(1.2, 1.2) translateY(-25%)"; a.getElementsByTagName('IMG')[0].style.borderRadius = "100%"; a.getElementsByTagName('H5')[0].style.color = "rgba(255,255,255, 0)"; this.getElementsByClassName('links')[0].style.transform = "translateY(-250%)"; this.getElementsByClassName('links')[0].style.opacity = "1"; carFigure = null; } } }; function startCarousel(e) { if (e != null) { carFigure = e; document.getElementById('carousel').style.animationPlayState = "running"; var p = e.parentElement; var a = p.getElementsByTagName('DIV')[2]; a.getElementsByTagName('IMG')[0].style.transform = "none"; a.getElementsByTagName('IMG')[0].style.borderRadius = "0"; a.getElementsByTagName('H5')[0].style.color = "rgba(255,255,255, 1)"; this.getElementsByClassName('links')[0].style.transform = "none"; this.getElementsByClassName('links')[0].style.opacity = "0"; } }; 
 --HTML Version (Snippet) 

Non si allega correttamente il gestore di eventi. Questa linea:

 $('.figure').click(toggleCarousel(this)); 

chiama immediatamente toggleCarousel (questo è ciò che faranno i parents). Quello che vuoi veramente è passare l’object funzione a .click() :

 $('.figure').click(toggleCarousel); 

Aggiornamento :

Come ha sottolineato @FelixKling, dovrai anche passare il target dell’evento alle funzioni downstream; sembra che si aspettino un elemento , non l’ evento . Inoltre, bool verrà reimpostato su false ogni chiamata, che non è ciò che desideri; dovresti metterlo in chiusura:

 var flag = false; // "bool" is a reserved word, changed the name function toggleCarousel(event) { var element = event.target; if (flag) { stopCarousel(element); } else { startCarousel(element); } flag = !flag; } 

Il tuo binding di eventi .click() non sta legando una funzione da chiamare quando viene cliccato .figure . toggleCarousel una chiamata diretta a toggleCarousel utilizzando l’object in questione al momento ( window ). È necessario fornire una funzione di callback a .click() .

Modifica: $('.figure').click(toggleCarousel(this)); a:

 $('.figure').click(function(){ toggleCarousel(this); }); 

In questo modo, toggleCarousel viene richiamato utilizzando l’object corretto al momento del clic. Dato che il tuo codice è ora, non è conforms alla firma di JQuery per .click() e tenta di richiamare immediatamente toggleCarousel usando l’object che è in controllo al momento del primo toggleCarousel del codice, che è la window .


Il binding di this object è volatile in JavaScript … cioè, non punta sempre allo stesso object e il suo binding può cambiare da una riga di codice a quella successiva. Il modo in cui invochi il codice che contiene la parola determina l’object a cui si collegherà.

Ecco una lista di controllo che puoi seguire per sapere a cosa si legherà …

Se il codice che contiene this è invocato:

  1. Come metodo o proprietà di un’istanza dell’object (attraverso una variabile di istanza):

     var o = new Object(); // "this" will be bound to the "o" object instance // while "someProperty" and "someMethod" code executes o.someProperty = someValue; o.someMethod(); 
  2. Tramite .call() , .apply() , .bind() o Array.prototype.fn :

     // "this" will be bound to the object suppled as the "thisObjectBinding" someFunction.call(thisObjectBinding, arg, arg); someFunction.apply(thisObjectBinding, [arg, arg]); var newFunc = someFunction.bind(thisObjectBinding, arg, arg); 

    Nota : quando viene richiamata una funzione di callback (ad es. Gestore di eventi), al gestore viene inviata una chiamata implicita quando viene triggersto l’evento. In questi casi, l’object responsabile dell’triggerszione dell’evento diventa l’object associato a this .

    Inoltre, diversi metodi Array.prototype consentono di thisObject che modificherà l’associazione per la durata della chiamata al metodo:

     Array.prototype.every( callbackfn [ , thisArg ] ) Array.prototype.some( callbackfn [ , thisArg ] ) Array.prototype.forEach( callbackfn [ , thisArg ] ) Array.prototype.map( callbackfn [ , thisArg ] ) Array.prototype.filter( callbackfn [ , thisArg ] ) 
  3. Se nessuno degli altri scenari si applica, si verifica l’associazione predefinita.

    3a. Con "use strict" in vigore: undefined è undefined

    3b. Senza "use strict" in vigore: this lega all’object Global

GLI APPUNTI:

a) this legame può anche essere influenzato dall’uso di eval() , ma come best practice generale, l’uso di eval() dovrebbe essere evitato.

b) Quando gli attributi HTML vengono utilizzati per colbind gli elementi DOM ai gestori di eventi (ad esempio onclick , onload , ecc.), le funzioni di wrapper globali anonimi vengono create attorno al valore della proprietà di gestione degli eventi, rendendo l’object Global ( window ) l’object . Questo è uno dei tanti motivi per evitare attributi di eventi HTML in linea.

Questa potrebbe non essere la risposta migliore o più diretta, ma spero che questo ti aiuti a capire cosa ti sei perso.

In javaScript, this object viene impostato durante una chiamata di funzione, in effetti. (anche se prendi nota della risposta estesa qui in dettaglio come this è definito / legato). Considera questo:

 function this_test () { console.log( this ); } this_test(); // prints nothing var x = {f:this_test}; // note, references to functions are not the same as function calls xf(); // prints {f:[function]} ie this==x inside the call this_test.call( x ); // identical in effect to above. 

Con questo in mente, considera questa linea che hai scritto:

 $('.figure').click(toggleCarousel(this)); 

Ciò che fa è impostare una funzione di gestore di eventi che è il risultato della chiamata a toggleCarousel(this) . Perché questo è (presumo) codice di primo livello in un file js o in un tag script, in questo contesto this === window perché non è all’interno di una funzione!

Quello che dovresti fare è questo:

 $('.figure').click( toggleCarousel ); 

Infine, dal momento che stai usando jQuery, dovresti usare i metodi jQuery per cercare e modificare DOM dato che è molto più semplice (e compatibile con il browser). Quindi questo idioma a volte visto nel codice evento jQuery:

 function event_handler () { var $this = $(this); } 

Letture altamente consigliate: jQuery Click Event : la maggior parte degli altri gestori di eventi funziona in modo simile.