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

Question

是否可以在jquery.live()中声明var(以及.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', '');
    }
});

假设我想在mouseover和mouseout函数中使用bool变量hasChildren，那么我是否必须在这两个函数中再次声明var，或者是否有一种方法可以在当前对象中全局声明它?

Answer 1

用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() <一口>[医生]

.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事件处理程序中分配值，然后通过$(this).data('hasChildren')或hasChildren在其他处理程序中访问它，这取决于您选择的方式(更改代码以反映这一点)。

提出计算

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

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

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

Answer 2

在顶部声明变量，如:

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