jquery 添加类到这个被点击的元素

我生成几行<tr>与任务。现在，可以通过单击某个任务将每个任务标记为完成span。我通过 ajax 请求来做到这一点。

这是 HTML：

<table>
    <tr>
        <td>#1</td>
        <td><span class="icon-complete-a to-heal"></span></td>
    </tr>
    <tr>
        <td>#2</td>
        <td><span class="icon-complete-a to-heal"></span></td>
    </tr>
    <tr>
        <td>#3</td>
        <td><span class="icon-complete-a to-heam"></span></td>
    </tr>
</table>

现在，当我单击某个跨度元素时，只有该元素应该更改类。

我用它来改变类：

$(".to-heal").addClass("completed-task");

但我所有的跨度元素都已完成课程。

所以我尝试了以下方法：

$(this).find(".to-heal").addClass("completed-task");

但这是行不通的。

有什么帮助吗？

UPDATE

我尝试使用$(this).addClass("completed-task");

这是我正在使用的完整 ajax 请求：

$(".to-heal").click(function() {

    var task = $(this).attr("data-task");

    $.ajax({

        type: "post",
        url: "assets/js/ajax/mark-as-complete.php",
        data: { 'task': task },
        success: function() {

            $(this).addClass("completed-task");

            $(".completed-task").click(function() {

                var task = $(this).attr("data-task");

                $.ajax({

                    type: "post",
                    url: "assets/js/ajax/mark-as-incomplete.php",
                    data: { 'task': task },
                    success: function() {

                        $(this).removeClass("completed-task");

                    }

                });

            });

        }

    });

});

标记类不再相同，因为我使用虚拟类来快速解释。对此抱歉...

不过还是谢谢

尝试使用以下代码，这是 jQuery 的首选方式

JS

$(".mark-as-complete").on("click", function(){
    $(this).addClass("completed);
});

$(".mark-as-complete").on("click", function(){将在跨度单击时触发单击功能

在该点击函数中我们正在检查$(this)这会将类添加到单击的范围。