javascript - jquery 向这个被点击的元素添加类

Question

我生成了几行 <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>

现在当我点击某个 span 元素时，只有那个元素应该改变类。

我用它来改变类:

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

但是我所有的 span 元素都得到了完整的类。

所以我尝试了以下方法:

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

但这行不通。

有什么帮助吗？

更新

我尝试使用 $(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");

                    }

                });

            });

        }

    });

});

标记类不再相同，因为我使用虚拟类进行快速解释。对不起...

谢谢

Answer 1

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

JS

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

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

在该点击功能中，我们正在检查 $(this)，它将向点击范围添加类。