Объявите var в jquery.live (), который можно использовать во всех функциях

Question

Можно ли объявить 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', '');
    }
});

Допустим, я хочу использовать bool var hasChildren также в функциях mouseover и mouseout. Должен ли я затем объявить, что var снова в этих 2 функциях или есть способ, которымЯ могу просто объявить это глобально в этом текущем объекте?

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>