Question

我创建了两个函数。

一个标记为已完成的内容
另一个将其标记为未完成的

我的职能：

function milestoneComplete() {
    $("td.milestone-check span.incomplete").click(function() {
        var milestone = $(this).attr("data-id");
        $.ajax({
            context: this,
            type: "post",
            url: "assets/ajax/milestones/milestone-mark_complete.php",
            data: { 'milestone': milestone },
            success: function(data) {
                $(this).addClass("complete");
                $(this).removeClass("incomplete");
            }
        });
    });
}

function milestoneIncomplete() {
    $("td.milestone-check span.complete").click(function() {
        var milestone = $(this).attr("data-id");
        $.ajax({
            context: this,
            type: "post",
            url: "assets/ajax/milestones/milestone-mark_incomplete.php",
            data: { 'milestone': milestone },
            success: function(data) {
                $(this).addClass("incomplete");
                $(this).removeClass("complete");
            }
        });
    });
}

在文档加载时，我用以下函数调用函数：

$(document).ready(function() {
    milestoneComplete();
    milestoneIncomplete();
});

在这里我点击它们来触发功能：

<span class="complete icon-checkmark" data-id="5"></span>

我试图在ajax请求的success函数中调用相反的函数，但之后该请求将被执行多次（参见注释行）。

我怎样才能完成这项工作，所以我可以完美地将其标记为完整然后不完整，然后再完成，等等？

感谢您的帮助！

Answer 1

您应该使用公共类创建单个请求，并使用.data()来保持状态，即complete或incomplete。

HTML 的

<span class="commonClass icon-checkmark" data-id="5" data-status="complete"></span>

脚本

//Bind event using a common class
$("td.milestone-check span.commonClass").click(function() {
    var milestone = $(this).data("id");

    //Url
    var url = "assets/ajax/milestones/";

    //maintain status using custom attribute
    var status = $(this).data('status');

    if( status == 'complete'){
        url += "milestone-mark_incomplete.php";
    }
    if(status == 'incomplete'){
        url += "milestone-mark_complete.php";
    }

    $.ajax({
        context: this,
        type: "post",
        url: url,
        data: { 'milestone': milestone },
        success: function(data) {
            $(this).data('status', status == 'complete' ? 'incomplete' : 'complete');
        }
    });
});

否则，您需要使用Event Delegation委托事件方法，动态生成元素或操作选择器（如删除和添加类）。

一般语法

$(document).on('event','selector',callback_function)

实施例

$("td.milestone-check").on('click',  "span.incomplete", function(){
    //Your code
});

$("td.milestone-check").on('click', "span.complete", function(){
    //Your code
});

Answer 2

尝试将回调函数作为param传递给两个方法。

function milestoneComplete(callback) {
        $("td.milestone-check span.incomplete").click(function() {
            var milestone = $(this).attr("data-id");
            $.ajax({
                context: this,
                type: "post",
                url: "assets/ajax/milestones/milestone-mark_complete.php",
                data: { 'milestone': milestone },
                success: function(data) {
                    $(this).addClass("complete");
                    $(this).removeClass("incomplete");

                    if(callback) {
                       callback();
                    }

                }
            });
        });
    }

function milestoneIncomplete(callback) {
    $("td.milestone-check span.complete").click(function() {
        var milestone = $(this).attr("data-id");
        $.ajax({
            context: this,
            type: "post",
            url: "assets/ajax/milestones/milestone-mark_incomplete.php",
            data: { 'milestone': milestone },
            success: function(data) {
                $(this).addClass("incomplete");
                $(this).removeClass("complete");

                if(callback) {
                   callback();
                }

            }
        });
    });
}

然后如下所示调用它。对于第一次通话我已经通过callback但不是第二次。在功能上我只会触发回调，如果它存在的话。

$(document).ready(function() {
    milestoneComplete(function() {
      milestoneIncomplete();
     });
});

2个函数，2个ajax请求，如何正确回调

2 个答案: