Question

是否可以合并下面的两段代码。如果你看看每个部分，你会发现它们几乎相同。我有另外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);
            }
        }
    });
});

Answer 1

我建议像这样添加属性

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

Answer 2

这个问题在Code Review和SO的边缘。

两个处理程序之间的唯一区别似乎是.post URL，而且似乎可以从点击目标的ID中派生出来。

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

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

jQuery将代码整合到一个函数中

2 个答案: