我使用任务生成多行<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");
}
});
});
}
});
});
标记类不再相同,因为我使用虚拟类来快速解释。对不起......
谢谢
答案 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,并将该属性应用于所有现有的选择器。