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元素都被添加了completed类。

所以我尝试了以下代码：

$(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");

                    }

                });

            });

        }

    });

});

很抱歉，我的标记类不再相同，因为我使用了虚拟类进行快速解释。对此感到抱歉...

谢谢你的理解

- Jeroen Bellemans

Answer 1

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

JS

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

$(".mark-as-complete").on("click", function(){会在单击span时触发click函数。

在该click函数中，我们正在检查$(this)，它将为单击的span添加类。

- Nilesh Mahajan

Answer 2

元素的上下文在ajax调用中丢失。您可以在ajax中使用选项来设置任何元素的上下文：

context:this,

Ajax调用片段：

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

- Milind Anantwar

---

我在我的ajax成功函数中尝试了那个，但似乎不起作用。 - Jeroen Bellemans

@JeroenBellemans：请检查更新后的答案。在Ajax调用中，元素上下文丢失了。 - Milind Anantwar

另一种方法是使用ES6处理()=>{}语法的方式，只需在$.ajax之前放置var _this = this;，然后使用$(_this).removeClass(...)。 - rdiz

Answer 3

你说你“生成”行。

如果你在客户端生成它们，你需要委派。找到最近的静态元素来生成行，例如表格：

<table id="markTable">

然后像这样委托：

$(function() {
  $("#markTable").on("click",".to-heal",function() {
    $(this).addClass("completed-task");
  });
  $("#markTable").on("click",".completed-task",function() {
    $(this).removeClass("completed-task");
  });
});

或者只是

$(function() {
  $("#markTable").on("click",".to-heal",function() {
    $(this).toggleClass("completed-task");
  });
});

更新：

$(function() {
  $(".to-heal").on("click",function() {
    var task = $(this).attr("data-task");
    var completed = $(this).hasClass("completed-task");
    $.ajax({
      type: "post",
      context:this,
      url: "assets/js/ajax/mark-as-"+(completed?"in":"")+"complete.php",
      data: { 'task': task },
      success: function() {
        $(this).toggleClass("completed-task",!$(this).hasClass("completed-task"));
      }
    });
  });
});

或者有一个PHP，接受参数complete或incomplete。

- mplungjan

---

哎呀！我错过了静态祖先和动态子选择器的逻辑...好发现 @mplungjan - Nilesh Mahajan

Answer 4

尝试使用this

$('span').click(function(){
    $(this).addClass("completed");
});

当你使用一个选择器时，它会搜索选定的类或ID，并将属性应用于所有现有的选择器。

- GautamD31