Как сделать эту функцию JavaScript глобальной, чтобы другие функции могли получить к ней доступ?

Question

Как сделать эту функцию JavaScript глобальной, чтобы другие функции могли получить к ней доступ?

0

У меня есть этот пример кода кода, который повторяется так много раз.

$(function(loadDatabyClickA){
    $('button').live('click', function(){

        selectedAgeType   = $(this).attr('value');

        var x       =   {};

        x.data      =   $('a').attr("data"); //selected item in tree (.liselected)
        x.command   =   $('a').attr("cmd");
        x.option    =   "x";
        x.sessionid =   docCookies.getItem("sessionid");
        x.ageType   =   selectedAgeType;
        x.showData  =   showUnderlyingData;

        var action  =   function(result, status) {

            var x_list  =   "";

            $.each(result, function(i, val){
                x_list  += "<li><h3>"+val.xtitle+"</h3></li>";
            });

        $('#x_view').append(x_list);
        };

        $.post("jsoncommand", JSON.stringify(chart), action)
        .error(function(){
            alert('error');
        });

    })
})

Как я могу извлечь этот блок, чтобы я мог получить к нему доступ из другой функции? Может быть, нравится использовать .extend()? Этот блок используется другой функцией:

$(function(loadDatabyClickB){
    $('button2').live('click', function(){

        selectedAgeType   =   $(this).attr('value');

        var y       =   {};

        y.data      =   $('a').attr("data"); //selected item in tree (.liselected)
        y.command   =   $('a').attr("cmd");
        y.option    =   "y";
        y.sessionid =   docCookies.getItem("sessionid");
        y.ageType   =   selectedAgeType;
        y.showData  =   showUnderlyingData;

        var action  =   function(result, status) {

            var y_list  =   "";

            $.each(result, function(i, val){
                y_list  += "<li><h3>"+val.ytitle+"</h3></li>";
            });

            $('#y_view').append(y_list);
        };

        $.post("jsoncommand", JSON.stringify(y), action)
        .error(function(){
            alert('error');
        });

    })
})

Вы, ребята, можете просто показать мне, как это сделать, потому что у меня нет подсказки. Я упрощу это сам. Заранее спасибо за вашу помощь!

rolodex 10 нояб. 2013, в 00:35

Источник

Теги:

javascript

jquery

3 ответа

Ещё вопросы

kavun · Answer 1 · 2013-11-09T21-17-00.000Z

Создайте функцию для создания обработчика кликов на основе "представления", который вы передаете.

function getButtonClickHandler(view) {
    return function () {
        selectedAgeType   =   $(this).attr('value');
        var y       =   {};
        y.data      =   $('a').attr("data"); //selected item in tree (.liselected)
        y.command   =   $('a').attr("cmd");
        y.option    =   view;
        y.sessionid =   docCookies.getItem("sessionid");
        y.ageType   =   selectedAgeType;
        y.showData  =   showUnderlyingData;
        var action  =   function(result, status) {
            var y_list  =   "";
            $.each(result, function(i, val){
                y_list  += "<li><h3>" + val[view + 'title'] + "</h3></li>";
            });
            $('#' + view + '_view').append(y_list);
        };
        $.post("jsoncommand", JSON.stringify(y), action)
        .error(function(){
            alert('error');
        });
    }
}

$(function () {
    $('button').on('click', getButtonClickHandler('y'));
    $('button2').on('click', getButtonClickHandler('x'));
});

Возможно, было бы лучше использовать .on() ? .live() устарела в более поздних версиях jQuery;)
Вам также необходимо различать различные свойства val . Итак, просто измените val.ytitle на val[view+'title'] в вашем коде
Что если я хочу удалить ageType и showData ? Если y_list использует другой DOM, например <a> , как расширить параметр?

Vadim · Answer 2 · 2013-11-09T21-08-00.000Z

Попробуй это:

window.bindClick = function(selector, option, view) {
    view = view || '#' + option + '_view';
    $(document).on('click', selector, function(){

        selectedAgeType   = $(this).attr('value');

        var x       =   {};

        x.data      =   $('a').attr("data"); //selected item in tree (.liselected)
        x.command   =   $('a').attr("cmd");
        x.option    =   option;
        x.sessionid =   docCookies.getItem("sessionid");
        x.ageType   =   selectedAgeType;
        x.showData  =   showUnderlyingData;

        var action  =   function(result, status) {

            var list  =   "";

            $.each(result, function(i, val){
                list  += "<li><h3>"+val[option+'title']+"</h3></li>";
            });

            $(view).append(list);
        };

        $.post("jsoncommand", JSON.stringify(chart), action)
        .error(function(){
            alert('error');
        });

    })
})

и из любого места в вашем коде:

bindClick('#button', 'x', '#x_view');
bindClick('#button2', 'y', '#y_view');

или просто

bindClick('#button, #button2', 'x');

это не сработает, так как он использует разные селекторы в обработчике событий $('#y_view') и $('#x_view')
с делегированием событий вы можете просто сделать bindClick('#button,#button2'); таким образом, вы связываете только один обработчик вместо двух
Что, если, например, я хотел бы удалить ageType и showData для другого события?
@rolodex, чем вам просто нужно добавить еще один логический параметр в bindClick и код окружения, который устанавливает showData и ageType внутри функции, if использует этот параметр

Osama Jetawe · Answer 3 · 2013-11-09T20-38-00.000Z

создайте свой собственный класс и вызовите свою функцию из своего класса

var youClass = {
        functionName : function() {
            selectedAgeType   = $(this).attr('value');

        var x       =   {};

        x.data      =   $('a').attr("data"); //selected item in tree (.liselected)
        x.command   =   $('a').attr("cmd");
        x.option    =   "x";
        x.sessionid =   docCookies.getItem("sessionid");
        x.ageType   =   selectedAgeType;
        x.showData  =   showUnderlyingData;

        var action  =   function(result, status) {

            var x_list  =   "";

            $.each(result, function(i, val){
                x_list  += "<li><h3>"+val.xtitle+"</h3></li>";
            });

        $('#x_view').append(x_list);
        };

        $.post("jsoncommand", JSON.stringify(chart), action)
        .error(function(){
            alert('error');
        });
        }
    }



//call your function
    $('button').live('click', function(){

        youClass.functionName(parameter);

    })

это не сработает, так как он использует разные селекторы в обработчике событий $('#y_view') и $('#x_view')
Как мне определить, какой параметр использовать?