如何将多个jquery函数变成一个函数？答案

【问题标题】：How to make multiple jquery functions into just one function?如何将多个jquery函数变成一个函数？
【发布时间】：2020-11-19 23:16:57
【问题描述】：

我有如下代码：-

$(document).ready(function () {
    $("#tableA").on("click", function () {
         $.ajax({
         type: "POST",
         url: "Testing.ashx",
         success: function (output) {
            output = JSON.parse(output);
            DrawTableA(output);
            }
         })
    });

     $("#tableB").on("click", function () {
         $.ajax({
         type: "POST",
         url: "Testing.ashx",
         success: function (output) {
            output = JSON.parse(output);
            DrawTableB(output);
            }
         })
    });          

}

<table id=tableA>tableA</table>
<table id=tableB>tableB</table>

我希望只把它变成一个函数而不是使用两个函数，因为属性都是一样的

【问题讨论】：

标签： javascript html jquery asp.net json

【解决方案1】：

首先，您可以用逗号加入选择器以组合事件处理程序。唯一的区别是在success 函数中调用的函数。假设那里的逻辑也相同，您可以将表作为参数传递：

$(document).ready(function () {
  $("#tableA, #tableB").on("click", function () {
     let $table = $(this);
     $.ajax({
       type: "POST",
       url: "Testing.ashx",
       success: function (output) {
         let output = JSON.parse(output);
         DrawTable($table, output);
       }
    })
  });
});

如果出于某种原因，您需要对每个 table 元素执行完全不同的逻辑，那么您可以将函数名称存储在 HTML 表的 data 属性中。然后您可以在对象中定义函数，由该属性的值作为键：

let tableFuncs = {
  foo: () => console.log('tableA'),
  bar: () => console.log('tableB')
}

$(document).ready(function() {
  $("#tableA, #tableB").on("click", function() {
    let $table = $(this);
    
    // inside AJAX callback...
    tableFuncs[$table.data('func')]();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableA" data-func="foo">
  <tr>
    <td>tableA</td>
  </tr>
</table>
<table id="tableB" data-func="bar">
  <tr>
    <td>tableB</td>
  </tr>
</table>

此外，正如@PeterSH 在 cmets 中指出的那样，最好在重复元素上使用公共类以使代码更易于维护。使用您当前的模式，如果您将来添加#tableC，您还需要记住修改 JS。如果您按类选择，您只需要记住仅在 HTML 中包含该类。

【讨论】：

如果将来添加更多表，最好有一个类选择器。 $(".drawTable").on("click", function () {})
非常好，谢谢。我在答案中添加了关于它的注释。

【解决方案2】：

我认为这样的事情会起作用

$("#tableB, #tableA").on("click", function () {
    var targetTable = $(this);
         $.ajax({
         type: "POST",
         url: "Testing.ashx",
         success: function (output) {
            output = JSON.parse(output);
            if(targetTable.attr('id') === 'tableA') {
             DrawTableA(output);
            } else {
             DrawTableB(output);
            }
            }
         })
    });

只需为每个目标元素使用, 分隔符

编辑：使用被点击的表的属性id，然后调用该表的函数进行渲染

【讨论】：

DrawTableA() 和 DrawTableB()，虽然
@noob这里ajax中的函数不同，它的DrawTableA()和DrawTableB()
您可以检查 attr.id 并为此调用特定函数.. 查看编辑后的答案
伙计们，这是我的新主题，stackoverflow.com/questions/63170853/…

【解决方案3】：

You can use this code for helpful 

$(document).ready(function () {
    $("#tableA, #tableB").on("click", function () {
         $.ajax({
         type: "POST",
         url: "Testing.ashx",
         success: function (output) {
            output = JSON.parse(output);
            DrawTableA(output);
            }
         })
    });

}

<table id=tableA>tableA</table>
<table id=tableB>tableB</table>

【讨论】：

【解决方案4】：

适用于所有以表格开头的 id：-

 $(document).ready(function () {
$("[id^=table]").on("click", function () {
 let $table = $(this);
     $.ajax({
     type: "POST",
     url: "Testing.ashx",
     success: function (output) {
        output = JSON.parse(output);
        DrawTable($table,output);
        }
     })
});        }

【讨论】：

【解决方案5】：

我是这样做的，而且效果很好。

            $(".tableToggle").on("click", function () {
                var tableType = $(this).attr('data-tableid');
                var fName = "DrawTable" + tableType;
                $('body').append('<div id="loadingDiv"><div class="lds"><div></div><div></div><div></div></div></div>');
                if (($("#tb2" + tableType + " tr").length) > 0) {
                        $("#tb1" + tableType).toggleClass("accordion accordion2");
                        $("#tb2" + tableType).toggle();
                        $("#loadingDiv").remove();
                    
                }
                else {
                    $.ajax({
                        type: "POST",
                        url: "AccInfoTest.ashx",
                        data: { itemType : tableType},
                        success: function (output) {
                            try {
                                output = JSON.parse(output);
                                window[fName](output);
                            }
                            catch (ex) {
                                alert("error");
                                $('#tb2' + tableType).empty();
                            }
                        }
                        , complete: function (data) {

                                $("#tb2" + tableType).show();
                                $("#tb1" + tableType).addClass("accordion2").removeClass("accordion");
                                $("#loadingDiv").remove();
                            
                        }
                    })
                }
            });

【讨论】：