在jquery.live()中声明var,它可以在所有函数中使用

时间:2012-01-02 10:16:56

标签: javascript jquery global-variables

是否可以在var(以及jquery.live()& .delegate())中声明可以在所有功能中使用的.on()

示例:

$("#s4-leftpanel-content ul.root > li.static > a").live({
    click: function (event) {
        var hasChildren = $(this).parent('li').children('ul').length > 0;
        if (hasChildren) {
            event.preventDefault();
            $("#s4-leftpanel-content ul.root li.static > ul.static").hide();
            $(this).parent('li').children('ul').toggle();
        }
    },
    mouseover: function () {
        $(this).css('background-color', 'green');
    },
    mouseout: function () {
        $(this).css('background-color', '');
    }
});

假设我想在hasChildrenmouseover函数中使用bool var mouseout,那么我是否必须在这些函数中再次声明var函数还是有一种方法可以在当前对象中全局声明它?

2 个答案:

答案 0 :(得分:5)

使用var声明的变量始终是上下文的本地变量,在本例中是事件处理程序。

您有三种可能性:

在所有事件处理程序可以访问的范围内创建变量

例如:

(function() {
    var hasChildren;

    $("#s4-leftpanel-content ul.root > li.static > a").live({
        // ...
        mouseover: function () {
           hasChildren = $(this).parent('li').children('ul').length > 0;
           $(this).css('background-color', 'green');
        },
        //...
    });
}());

自调用函数创建一个新范围。 hasChildren只能由事件处理程序访问,不会泄漏到全局范围。

使用.data() [docs]

.data()允许您将任意数据附加到DOM元素。

//...
click: function (event) {    
    var hasChildren = $(this).data('hasChildren');
    if (hasChildren) {
        event.preventDefault();
        $("#s4-leftpanel-content ul.root li.static > ul.static").hide();
        $(this).parent('li').children('ul').toggle();
    }
},
mouseover: function () {
    $(this).data('hasChildren', $(this).parent('li').children('ul').length > 0);
    $(this).css('background-color', 'green');
},
//...

更新

正如@pimvdb所指出的那样,mouseover始终在click之前触发,您可以在mouseover事件处理程序中分配值,然后通过{在其他处理程序中访问它{1}}或仅$(this).data('hasChildren'),具体取决于您选择的方式(更改代码以反映此情况)。

将计算结果计算

由于确定元素是否具有子元素仅取决于元素本身,您还可以将这行代码分解为额外函数并在每个事件处理程序中调用它:

hasChildren

当然,这需要重复相同计算的成本,但您至少不会重复代码。

答案 1 :(得分:0)

将您的变量声明为顶部,如:


<script type="text/javascript">
var hasChildren;
//then your js, jQuery codes
</script>