“这”在另一个事件中无法正常工作。我为什么无能为力 [英] 'this' does not work properly in another event. I'm clueless as to why
本文介绍了“这”在另一个事件中无法正常工作。我为什么无能为力的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
var carFigure = null; // - -------- Events $（'。figure'）。click（toggleCarousel（this））; // $（'。figure'）。mouseover（stopCarousel（this））; // $（'图（））。mouseleave（startCarousel（carFigure））; // ------------ Switcharoo函数function toggleCarousel（event）{var bool = false; console.log（event）if（bool）{stopCarousel（event）; bool = false; } else {startCarousel（event）; bool = true; }} // ----------动作函数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版本（Snippet） div class =carcontainer> < div id =carousel> <图> < div class =figure> < div class =links> < a>< img src =〜/ Content / images / LinkedInIco.png/>< / a> < a href =http://www.example.com>< img src =〜/ Content / images / WebsiteIco.png/>< / a> < / DIV> < / DIV> < DIV> < h5>人名< / h5> < img src =〜/ Content / images / Name.jpgalt =/> < / DIV> < /数字> <图> < div class =figure> < div class =links> < a>< img src =〜/ Content / images / LinkedInIco.png/>< / a> < a href =http://www.example.com>< img src =〜/ Content / images / WebsiteIco.png/>< / a> < / DIV> < / DIV> < DIV> < h5>人名< / h5> < img src =〜/ Content / images / Name.jpgalt =/> < / DIV> < / figure>< / div>< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< ; / script>
解决方案
你没有正确附加事件处理程序。这行：
$（'。figure'）点击（toggleCarousel（this））;
...是调用 toggleCarousel 与这个立即（这是括号将做）。你真正希望的是将功能对象传递给 .click（）：
$（'。figure'）。click（toggleCarousel）;
更新：
正如@FelixKling所指出的那样，你还需要将事件的目标传递给下游的功能;看起来他们希望有一个元素，而不是事件。另外， bool 将重置为 false 每个呼叫，这不是你想要的;你应该把它放在关闭中：
var flag = false; //bool是一个保留字，改名为
function toggleCarousel（event）{
var element = event.target;
if（flag）{
stopCarousel（element）;
}
else {
startCarousel（element）;
}
flag =！flag;
}
Short story, I don't know why it's not working, I've tried Console.Log() to figure out what 'this' is and the event just keeps passing window. It's a click event that's suppose to activate effects on a certain figure in this carousel, which is why I can't just individually search for class (at least to my knowledge). Any fix from the smarter?
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)
<div class="carcontainer">
<div id="carousel">
<figure>
<div class="figure">
<div class="links">
<a><img src="~/Content/images/LinkedInIco.png" /></a>
<a href="http://www.example.com"><img src="~/Content/images/WebsiteIco.png" /></a>
</div>
</div>
<div>
<h5>Person Name</h5>
<img src="~/Content/images/Name.jpg" alt="" />
</div>
</figure>
<figure>
<div class="figure">
<div class="links">
<a><img src="~/Content/images/LinkedInIco.png" /></a>
<a href="http://www.example.com"><img src="~/Content/images/WebsiteIco.png" /></a>
</div>
</div>
<div>
<h5>Person Name</h5>
<img src="~/Content/images/Name.jpg" alt="" />
</div>
</figure>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
解决方案
You aren't attaching the event handler correctly. This line:
$('.figure').click(toggleCarousel(this));
...is calling toggleCarousel with this immediately (that's what the parens will do). What you really want is to pass the function object to .click():
$('.figure').click(toggleCarousel);
Update:
As @FelixKling pointed out, you'll also want to pass the target of the event to the downstream functions; it looks like they expect an element, not the event. Also, bool will be reset to false each call, which is not what you want; you should put it in the closure:
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;
}
这篇关于“这”在另一个事件中无法正常工作。我为什么无能为力的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
