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

我用任务生成几行

。 现在，通过单击span可以将每个任务标记为完成。 我用ajax请求这样做。

这是html：

 
 
 
#1
 
 
 
 
#2
 
 
 
 
#3
 
 
  

现在，当我单击某个span元素时，只有该元素才能更改类。

我用它来改变类：

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

但是我所有的span元素都是完成的课程。

所以我尝试了以下内容：

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

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

谢谢

Answer 1

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

 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"); } }); 

Answer 2

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

JS

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

$(".mark-as-complete").on("click", function(){将在span单击时触发clickfunction

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

Answer 3

你说你生成行。

如果您在客户端上生成它们，则需要委派它们。 将最近的静态元素放到生成的行中，例如表：

然后委托这样：

 $(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使参数完整或不完整

Answer 4

试着用this

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

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