jQuery将代码合并为一个函数

jQuery consolidate code into one function

本文关键字：一个 函数 代码 合并 jQuery      更新时间：2023-09-26

是否可以合并下面的两部分代码。如果你仔细看每一部分，你会发现它们几乎完全相同。我还有另外3或4段代码，它们也是相同的。我想知道是否有一种更整洁的方法可以让我使用相同的代码？

$("#agencies").on("click", ".applyClick", function(event) {
    event.stopPropagation();
    event.preventDefault();
    var target = $(this);
    var currentParent = $(this).closest('tr');
    var id = currentParent.attr('id');
    var items = $("input,select,textarea", currentParent);
    var strData = items.serialize() + '&id=' + id;
    $.post("agencies.php", strData, function(data) {
        var data = $.parseJSON(data);
        if(data.redirect_location){
            window.location = data.redirect_location;
        }
        else{
            var type = data.type;
            var result = $.map(data, function(val,index) {
                if(index != 'type'){
                    var str = val;
                }
                return str;
            }).join("<br>");
            if(type == 'error'){
                alert(result);
            }
            else{
                $("div#messages").html('<div class="'+ type +'-message">' + result + '</div>').slideDown("slow");
                closeRow('quit', target);
            }
        }
    });
});
$("#builders").on("click", ".applyClick", function(event) {
    event.stopPropagation();
    event.preventDefault();
    var target = $(this);
    var currentParent = $(this).closest('tr');
    var id = currentParent.attr('id');
    var items = $("input,select,textarea", currentParent);
    var strData = items.serialize() + '&id=' + id;
    $.post("builders.php", strData, function(data) {
        var data = $.parseJSON(data);
        if(data.redirect_location){
            window.location = data.redirect_location;
        }
        else{
            var type = data.type;
            var result = $.map(data, function(val,index) {
                if(index != 'type'){
                    var str = val;
                }
                return str;
            }).join("<br>");
            if(type == 'error'){
                alert(result);
            }
            else{
                $("div#messages").html('<div class="'+ type +'-message">' + result + '</div>').slideDown("slow");
                closeRow('quit', target);
            }
        }
    });
});

我将建议为您的按钮添加属性，如

<input type="button" data-url="agencies" id="agencies" />
<input type="button" data-url="builders.php" id="builders" />

和这个一样的代码

$("#agencies, #builders").on("click", ".applyClick", function(event) {
    var url = $(this).attr('data-url');
    ....
    $.post(url, strData, function(data) {
    ...
    ...
});

这个问题在代码审查和SO.的边缘

这两个处理程序之间的唯一区别似乎是.post URL，它似乎可以从单击目标的ID派生。

因此，做一些字符串处理来构建URL，并将修改后的函数作为点击处理程序附加到这两个元素：

$("#agencies, #builders").on("click", ".applyClick", function(event) {
    ...
    $.post(this.id + '.php', strData, function(data) {
    ...
}
相关文章：