jQuery - 如何使这个javascript函数全局化，以便其他函数可以访问它

jQuery - How to make this javascript function global so other function can access it?

本文关键字：函数其他访问全局何使这 jQuery javascript 更新时间：2023-09-26

我有一个示例代码块，它现在重复了很多次。

$(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');
        });
    })
})

你们可以给我看一个如何做到这一点的提示，因为我没有头绪。我会自己简化它。提前感谢您的帮助！

创建一个函数，以基于您传入的"视图"生成单击处理程序。

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'));
});

创建自己的类并从类调用函数

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);
    })

试试这个：

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');