0 
var foo = true;

// foo here is not being updated when set to false
if(foo) {
    // and this will always work
    $("#bar").on("click", function() {
        alert("hello");
    });
}

$("#set").on("click", function() {
    alert("foo is now false");
    foo = false;
});

<p id="bar">bar</p>
<input type="button" id="set" value="set to false" />

如果我把if(foo)里面的功能，它工作正常。

但是这里的情况是多个鼠标动作要检查的条件更多，我必须if为每个动作编写相同的检查......

$("#bar").on("mouseover", function() {
    if(foo && bar && baz && qux) {
        // do job A
    }
}).on("mouseout", function() {
    if(foo && bar && baz && qux) {
        // do job B
    }
}).on("click", function() {
    if(foo && bar && baz && qux) {
        // do job C
    }
}).on("dblclick", function() {
    if(foo && bar && baz && qux) {
        // do job D
    }
});

那么我怎样才能if用更新的 foo 编写唯一一次来完成这项工作呢？在这里摆弄

4

4 回答 4

2

在点击处理程序中移动您的 if 条件：

$("#bar").on("click", function() {
    if(foo) { alert("hello");}
});

jsFiddle 示例

请注意，如果所有事件的条件都相同，则可以在.on()调用中将事件串在一起，例如：

$('#bar').on('mouseover mouseout click dblclick', function(e) {
    if(foo && bar && baz && qux) {
        switch(e.type){
            case 'mouseover':
                // thing 1
            break;
            case 'mouseout':
                // thing 2
            break;
            case 'click':
                // thing 3
            break;
            case 'dblclick':
                // thing 4
            break;
        }
    }
 });
于 2013-02-13T17:02:16.260 回答
2

你应该这样做：

var foo = true;

var check = function() {
     if(foo === true) //Add here your multiple checks
         return true;
    else
        return false;
}

$("#bar").on("click", function() {
    if(check())
        alert("hello");
});

$("#set").on("click", function() {
    alert("foo is now false");
    foo = false;
});

请参阅更新的小提琴。

jquery 不解析，只执行函数，所以必须检查函数中的 var 或执行新函数来检查全局 var。

于 2013-02-13T17:02:16.170 回答
0

好吧...if在事件处理程序中放置多个条件并不是唯一的选择。

在这里，我将事件处理程序包装在一个函数中，正如@jfriend00 所建议的，我在 set 时调用off了 on 。此外，添加了另一个按钮以设置回以说明事件处理程序的重新激活（重新绑定）。#barfoo=falsefootrue

var foo = true;

function bar() {
    if(foo) {
        $("#bar").on("click", function() {
            alert("hello");
        })/*.on("mouseover/dblclick/...")*/;
    }
}
bar();

$("#set_false").on("click", function() {
    alert("foo is now false");
    foo = false;
    // unbind mouse actions
    $("#bar").off();
});

$("#set_true").on("click", function() {
    alert("foo is now true");
    foo = true;
    // re-activate mouse actions
    bar();
});

小提琴：http: //jsfiddle.net/AT6RT/7/

于 2013-02-13T18:42:02.947 回答
0

在您的第一个代码示例中，if (foo)仅在初始化时评估，而不是在每次单击时评估，因此，它当然只作用于foo代码在初始化时运行时的值。如果您要foo在事件发生时检查 的值，则检查必须在事件处理程序内，因为这是在事件发生时实际运行的唯一代码。

您有以下选择：

  1. 制作一组事件处理程序，然后foo在每个事件处理程序内部进行评估，以根据foo.
  2. 当您更改 的值时foo，使用.off()删除以前的事件处理程序并安装新的事件处理程序。
  3. 您可以更改父对象上的类名，而不是使用该变量，并为您可能使用的每个类名值使用委托事件处理和单独的事件处理程序。这样，您将使用 jQuery 的委托事件处理逻辑和选择器比较来决定在任何给定时间应该调用哪个事件处理程序。

您可以通过编写在多个事件处理程序中使用的通用函数来使选项 1 更高效或更干燥。但是，事实仍然是，如果您想在事件发生时检查变量的值，那么您必须在事件处理程序中检查它，因为这是在事件处理程序时运行的代码。

于 2013-02-13T17:02:39.883 回答