Я создаю несколько строк <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");
Но все мои элементы диапазона получают завершенный класс.
Поэтому я попробовал следующее:
$(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"); } }); }); } }); });
Классы разметки больше не похожи, поскольку я использовал фиктивные классы для быстрого объяснения. Простите за это…
Спасибо хоть
Контекст элемента теряется при вызове ajax. вы можете использовать параметр context в ajax для установки любого контекста элементов:
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"); } });
попробуйте использовать следующий код. Это предпочтительный способ jQuery
JS
$(".mark-as-complete").on("click", function(){ $(this).addClass("completed); });
$(".mark-as-complete").on("click", function(){ запускает функцию щелчка по нажатию на диапазон
в этой функции щелчка мы проверяем $(this) которая добавит класс к клику.
Вы говорите, что вы GENERATE строк.
Если вы создаете их на клиенте, вам необходимо делегировать. Возьмите ближайший статический элемент к сгенерированным строкам, например таблицу:
<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, который принимает параметр полный или неполный
Попытайтесь использовать this
$('span').click(function(){ $(this).addClass("completed"); });
Когда вы используете селектор, он ищет выбранный класс или id, и он применит это свойство ко всем существующим селекторам.