Question

这是我的代码：

$(val1).mouseleave(function () {
    flag = false;
    $(val3 + "," + val4).mouseenter(function () {

        flag = true;
        //alert(flag);

    });
    if (flag == true) {
        //alert("if"+flag);
        $(".big" + i + j + "boxer").show();
        $(".big" + i + "box").show();
        $(".big" + i + "box").append('<div class="opacity" style="background-color:rgba(00,00,00,0.77);position:absolute;top:0;right:0;left:0;bottom:0;"></div>')
        $(".small" + i + "box").append('<div class="opacity" style="background-color:rgba(00,00,00,0.77);position:absolute;top:0;right:0;left:0;bottom:0;"></div>')

    } else {
        //alert("else"+flag);
        $('.opacity').remove();
        $(val2).hide();
        $(val3).show();

    }
});

它不符合flag = true条件。如果我在alert中$(val1).mouseleave(function(){});，则会显示flag = true;但是当我在$(val1).mouseleave(function(){});之外提醒它时，会显示flag = false。

好吧，让我解释一下：我有4个街区val1,val2,val3和val4。当用户离开val1并输入val3或val4块时，我想set/add opacity class ...如果他们do not enter进入val3/val4但是转到进入val2 or another block块，然后我想删除不透明度类。

Answer 1

在你进行if测试的时候：

if(flag==true)

... flag 总是是假的，因为您在此之前将其设置为false。它被设置为true的唯一位置是你绑定在那里的mouseenter处理程序内部，但是那时处理函数没有被调用。

让我在代码的开头添加一些注释，试图让它更清晰：

$(val1).mouseleave(function () {
    flag = false;                                  // set flag to false
    $(val3 + "," + val4).mouseenter(function () {  // bind a mouseenter
        flag = true;                               // that won't be called immediately
        //alert(flag);                             // so won't change flag yet
    });
    if (flag == true) {                            // flag is still false

从mouseenter处理程序内部绑定mouseleave处理程序没有意义，因为这意味着每次鼠标移动时都会将另一个mouseenter处理程序绑定到相同的元素

我无法真正建议具体的解决方案，因为您没有解释您想要实现的效果。（但我可能首先将mouseenter代码移到其他地方。）

Answer 2

$(val1).mouseleave(function () {
    flag = false;
    $(val3 + "," + val4).mouseenter(function () {

        flag = true;
        //alert(flag);
        if (flag == true) {
        //alert("if"+flag);
        $(".big" + i + j + "boxer").show();
        $(".big" + i + "box").show();
        $(".big" + i + "box").append('<div class="opacity" style="background-color:rgba(00,00,00,0.77);position:absolute;top:0;right:0;left:0;bottom:0;"></div>')
        $(".small" + i + "box").append('<div class="opacity" style="background-color:rgba(00,00,00,0.77);position:absolute;top:0;right:0;left:0;bottom:0;"></div>')

    } else {
        //alert("else"+flag);
        $('.opacity').remove();
        $(val2).hide();
        $(val3).show();

    }

    });

});

Answer 3

既然你已经澄清了你的目标，我认为这样的事情会起作用：

var haveLeft = null;    

$(val1).mouseleave(function () {
    haveLeft = "val1";
});

$(val2).mouseenter(function () {
    if(haveLeft === "val1") {
        // remove opacity class
    }        
}).mouseleave(function(){
    haveLeft = "val2";
});

$(val3 + "," + val4).mouseenter(function () {
    if(haveLeft === "val1") {
        // add opacity class
    }
}).mouseleave(function(){
    haveLeft = "val3/4";
});

Answer 4

将flag声明为全局变量。应该解决它。除非你这样做，否则你想要在外面警告的标志实例不存在，因为该函数是本地的。

使用if语句检查变量true

4 个答案: