Javascript 在jquery.live（）中声明变量，该变量可用于所有函数

是否可以在

jquery.live（）

（以及

.delegate（）

&

.on（）

）中声明一个可在所有函数中使用的

var

例如：

$("#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 var

haschilds

，那么我是否必须在这两个函数中再次声明

var

，或者是否有一种方法可以在当前对象中全局声明它？

在顶部声明变量，如：

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

儿童；
//然后是你的js，jQuery代码

---

在顶部声明变量，如：

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

儿童；
//然后是你的js，jQuery代码

---

使用

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（）

允许将任意数据附加到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所指出的，由于

鼠标悬停

总是在

单击

之前触发，您可以在

鼠标悬停

事件处理程序中分配值，然后通过

$（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');
        },
        //...
    });
}());

---

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

使用

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');
        },
        //...
    });
}());

自调用函数创建一个新的作用域。

haschilds

仅可由事件处理程序访问，不会泄漏到全局作用域

使用

.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所指出的，由于

鼠标悬停

总是在

单击

之前触发，您可以在

鼠标悬停

事件处理程序中分配值，然后通过

$（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');
        },
        //...
    });
}());

---

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

虽然这在技术上是正确的，但我认为这没有多大意义，因为在单击

之前会触发
鼠标上方
。据我所知，OP希望执行
haschilds
这段代码虽然这在技术上是正确的，但我认为这没有多大意义，因为
mouseover
是在
单击之前启动的。据我所知，OP希望在所有处理程序中执行
hasschildren
段代码，而不复制它。