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.
Here's the 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.
I use this to change class:
$(".to-heal").addClass("completed-task");
But all my span elements are getting the completed class.
So I tried with the following:
$(this).find(".to-heal").addClass("completed-task");
But that doesn't work.
Any help?
UPDATE
I tried using the $(this).addClass("completed-task");
Here is the full ajax request I'm using:
$(".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