jquery将类添加到这个点击的元素答案

【问题标题】：jquery add class to this clicked elementjquery将类添加到这个点击的元素
【发布时间】：2015-07-30 01:17:16
【问题描述】：

我用任务生成了几行<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");

                    }

                });

            });

        }

    });

});

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

谢谢

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

context:this,

Ajax 调用 sn-p:

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

【讨论】：

我在我的 ajax succes 函数中尝试过，但似乎不起作用。
@JeroenBellemans：检查更新的答案。元素上下文在 ajax 调用中丢失。
另一种方式是 ES6 处理 ()=>{} 语法的方式，只需将var _this = this; 放在$.ajax 之前，然后使用$(_this).removeClass(...)。

【解决方案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

【讨论】：

哎呀！，我错过了静态祖先和动态子选择器逻辑.. 很好 @mplungjan

【解决方案4】：

尝试使用this

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

当您使用选择器时，它会搜索选定的类或 id，并将该属性应用于所有现有的选择器。

【讨论】：