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

I generate several rows <tr> with tasks. Now, each task can be marked as complete by clicking on a span. I do that with an ajax request.

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

Here's the html:

这是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>

Now when I click on a certain span element, only that element should change class.

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

I use this to change class:

我用它来改变类：

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

But all my span elements are getting the completed class.

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

So I tried with the following:

所以我尝试了以下内容：

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

But that doesn't work.

但这不起作用。

Any help?

有帮助吗？

UPDATE

UPDATE

I tried using the $(this).addClass("completed-task");

我尝试使用$（this）.addClass（“completed-task”）;

Here is the full ajax request I'm using:

这是我正在使用的完整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");

                    }

                });

            });

        }

    });

});

The markup classes are not the same anymore, as I used dummy classes for quick explanation. Sorry for that...

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

Thanks though

谢谢

4 个解决方案

#1

The context of element is lost in ajax call. you can use context option in ajax to set any elements context:

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

context:this,

Ajax call snippet:

Ajax调用片段：

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

#2

try using following code, This is a prefered way jQuery

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

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

$(".mark-as-complete").on("click", function(){ will trigger click function on span click

$（“。mark-as-complete”）。on（“click”，function（）{将在span单击时触发click功能

within that click function we are checking $(this) which will add class to clicked span.

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

#3

You say you GENERATE the rows.

你说你生成行。

If you generate them on the client you need to delegate. Take the nearest static element to the generated rows, for example the table:

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

<table id="markTable">

then delegate like this:

然后委托这样：

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

or just

要不就

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

UPDATE:

更新：

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

or have ONE php that takes the parameter complete or incomplete

或者有一个PHP使参数完整或不完整

#4

Try to use this

试着用这个

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

When you use an selector it search for the selected class or id and it will apply the property to all the existed selectors.

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

#1