javascript - 在 Angular2 应用程序中从 jquery 跨 mouseenter 事件传递 JS 变量

Question

我遇到以下女巫功能的问题:

inactive() { 
        let target = $('.album__item--cover-container');
        var leave:boolean;
        target.mouseleave(function() {
            leave = true;
            console.log("LEAVE MOUSEENTER: ", leave);
        });
        console.log("LEAVE: ", leave);
        if (leave) {
            console.log("LEAVE CONDITION: ", leave);
            this.flyOut = 'inactive';
        }
        console.log(this.flyOut); 
    }

我不知道日志“LEAVE MOUSEENTER”是true，并且从鼠标事件日志退出后“LEAVE”是未定义 。我无法在此事件函数中声明 this.flyOut = true 。请有人帮助我，并解释为什么这种行为会这样？

问候 格雷格

Answer 1

我认为你的问题是因为你没有在鼠标离开事件的回调中执行任何操作。

这仅在调用 inactive() 时运行一次。

if (leave) {
    console.log("LEAVE CONDITION: ", leave);
    this.flyOut = 'inactive';
}

我假设您正在尝试在 mouseleave 上设置某些状态，然后您想要检查 this.flyOut 是否处于非事件状态？

(function ($) {// just some wrapper
    let flyOut = 'inactive'
    const target = $('.album__item--cover-container'); // Use const if you know it wont change
    const check = $('.check-button-class-thing');

    target.mouseleave(function() {
        flyOut = 'inactive'
    });

    target.mouseenter(function() {
        flyOut = 'active'
    });

    check.click(function() {
        console.log(inactive()); // Is it inactive or not
    });

    function inactive() {
        return flyOut === 'inactive' ? true : false;
    }
})(jQuery);

我在这里对您的用例做出假设，但我希望这会有所帮助。代码本身并不是很有用，因为它取决于 .check-button-class-thing 的嵌套位置，但这只是一个示例。