從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"是真實的，並且從鼠標事件中退出后，日志"LEAVE ”是undefined 。 我無法在此事件函數中聲明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嵌套的位置，而只是一個示例。

Answer 2

的

if (leave) {

不在mouseleave函數回調中。 因此，當首次調用inactive()時， leave已聲明為沒有任何默認值（它是undefined ）。 然后調用if。 僅在調用mouseleave事件時為true。