“此”在另一事件中无法正常工作。我对为什么一无所知

Question

简而言之，我不知道为什么它不起作用，我尝试了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";

    }

};

Answer 1

您没有正确附加事件处理程序。这行：$('.figure').click(toggleCarousel(this));...被调用 toggleCarousel与this立即（这是什么括号都行）。您真正想要的是将函数对象传递给.click()：$('.figure').click(toggleCarousel);更新：正如@FelixKling指出的那样，您还希望将事件的目标传递给下游函数；看起来他们期望一个元素，而不是事件。另外，bool将重置为false每个呼叫，这不是您想要的；您应该将其放在结尾处：var flag = false; // "bool" is a reserved word, changed the namefunction toggleCarousel(event) {    var element = event.target;    if (flag) {        stopCarousel(element);    }    else {        startCarousel(element);    }    flag = !flag;}