‘this’在另一个事件中不能正常工作。 我对于为什么一无所知

简短的故事，我不知道为什么它不起作用，我已经尝试过Console.Log（）来弄清楚’这个’是什么，并且事件只是不断传递窗口。 这是一个点击事件，假设在这个轮播中激活对某个人物的影响，这就是为什么我不能单独搜索课程（至少据我所知）。 更聪明的任何解决方案？

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) 
 
 
 
 
   
 
 
 
Person Name
  
 
 
 
 
   
 
 
 
Person Name
  
 
 
 
  

Answer 1

您没有正确附加事件处理程序。 这一行：

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

…立即调用 toggleCarousel （这就是parens会做的）。 你真正想要的是将函数对象传递给.click() ：

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

更新 ：

正如@FelixKling指出的那样，您还需要将事件的目标传递给下游函数; 看起来他们期待一个元素 ，而不是事件 。 此外，每次通话都会将bool重置为false ，这不是您想要的; 你应该把它放在封闭中：

 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; } 

Answer 2

您的.click()事件绑定不绑定在单击.figure时要调用的函数。 它正在使用当时（ window ）生效的this对象直接调用toggleCarousel 。 您需要为.click()提供回调函数。

更改： $('.figure').click(toggleCarousel(this)); 至：

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

因此，在单击时使用正确的this对象调用toggleCarousel 。 正如您的代码现在，它不符合toggleCarousel .click()的JQuery签名，并尝试使用在首次遇到代码时控制的this对象（即toggleCarousel立即调用toggleCarousel 。

---

this对象绑定在JavaScript中是易失性的……也就是说，它并不总是指向同一个对象，并且它的绑定可以从一行代码更改为下一行代码。 如何调用包含单词的代码，以确定它将绑定到哪个对象。

这是一个清单，您可以按照它来了解this将绑定到…

如果调用包含this的代码：

1. 作为对象实例的方法或属性（通过实例变量）：

    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. 通过.apply() .bind()或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); 

   注意 ：当调用回调函数（即事件处理程序）时，在触发事件时会对处理程序进行隐式调用。 在这些情况下，负责触发事件的对象将成为绑定this对象的对象。

   另外，几个Array.prototype方法允许传递thisObject ，这将在方法调用的持续时间内改变绑定：

    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. 如果没有其他方案适用，则发生默认绑定。

   3A。 实际上使用"use strict" ： this是undefined

   3B。 没有"use strict"生效： this将绑定到Global对象

笔记：

a）使用eval()也可以影响this绑定，但作为一般的最佳实践，应避免使用eval() 。

b）当HTML属性用于将DOM元素连接到事件处理程序（即onclick ， onload等）时，围绕事件处理属性的值创建匿名全局包装函数，从而使Global对象（ window ）成为this对象。 这是避免内联HTML事件属性的几个原因之一。

Answer 3

这可能不是最好或最直接的答案，但希望这有助于您了解您错过的内容。

在javaScript中， this对象在函数调用期间设置，实际上是有效的。 （尽管请注意这里的扩展答案，详细说明如何定义/绑定）。 考虑一下：

 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. 

考虑到这一点，请考虑您写的这一行：

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

这样做是设置一个事件处理函数，它是调用toggleCarousel(this)的结果。 因为这是（我假设）js文件或脚本标记中的顶级代码，在这个上下文中this === window因为它不在函数内部！

你应该做的是这样的：

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

最后，由于您使用的是jQuery，因此您应该使用jQuery方法来查找和修改DOM，因为它更容易（并且符合跨浏览器）。 因此有时在jQuery事件代码中看到这个成语：

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

强烈建议阅读 – jQuery Click事件 – 大多数其他事件处理程序的工作方式类似。