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

时间:2015-05-18 13:42:32

标签: javascript php jquery html css

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

                    }

                });

            });

        }

    });

});

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

谢谢

4 个答案:

答案 0 :(得分:2)

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

<强> JS

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

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

上的点击功能

在该点击功能中,我们正在检查$(this),这将为点击的跨度添加类。

答案 1 :(得分:1)

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

context:this,

Ajax call snippet:

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

答案 2 :(得分:1)

你说你生成行。

如果您在客户端上生成它们,则需要委派它们。将最近的静态元素取为生成的行,例如表:

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

答案 3 :(得分:0)

尝试使用this

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

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