'this' не работает должным образом в другом событии. Я не знаю, почему [дубликаты]
На этот вопрос уже есть ответ:
Javascript Событие «addEventListener» запускается при загрузке страницы [duplicate] 2 ответаКороткая история, я не знаю, почему она не работает, я попробовал 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)
<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>