Question

我有这个代码块，现在不断重复这么多次。

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

    })
})

你们可以告诉我一些如何做到这一点，因为我没有线索。我会自己简化一下。在此先感谢您的帮助！

Answer 1

创建一个函数，根据您传入的“视图”生成点击处理程序。

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

Answer 2

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

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

    })

Answer 3

试试这个：

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

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

3 个答案: