Попытка удалить функциональность на элементе

Question

Я пытаюсь удалить «функциональность» на одном из моих элементов.

Это HTML/PHP, который генерирует код:

 <table> 
     <?php for($i = 0; $i < 10; $i++){ ?> 
      <tr> 
       <?php for($k = 0; $k < 10; $k++) {?> 
        <td>asd</td> 
       <?php }?> 
      </tr> 
     <?php } ?> 
    </table> 

А вот JQuery:

  $("td:not(done)").click(function(){ 
       $(this).addClass("done"); 
       if(blue){ 
        $(this).css("background-color", "blue"); 
        blue = false; 
       } else { 
        $(this).css("background-color", "red"); 
        blue = true; 
       } 
      }); 

Попытка добавить класс к тд элемент, который был щелкнули, так это не работает после первого щелчка. Но он не может заставить его работать.

Answer 1

обновленный код

использование .hasClass()

$("td").click(function() { 
    if (!$(this).hasClass('done')) { 
     $(this).addClass("done"); 
     if (blue) { 
      $(this).css("background-color", "blue"); 
      blue = false; 
     } else { 
      $(this).css("background-color", "red"); 
      blue = true; 
     } 
    } 
}); 

Вы забыли добавить . в done классе

class-selector документация

$("td:not(.done)").click(function(){ 
     ^
       $(this).addClass("done"); 
       if(blue){ 
        $(this).css("background-color", "blue"); 
        blue = false; 
       } else { 
        $(this).css("background-color", "red"); 
        blue = true; 
       } 
      }); 

Answer 2

Из того, что я понимаю й е td должны быть интерактивными только один раз, так что вам нужно .one()

$("td").one('click', function() { 
    $(this).addClass("done"); 
    if (blue) { 
     $(this).css("background-color", "blue"); 
     blue = false; 
    } else { 
     $(this).css("background-color", "red"); 
     blue = true; 
    } 
}); 

или используя событие делегации с не сделали фильтр

$("table").on('click', 'td:not(.done)', function() { 
    $(this).addClass("done"); 
    if (blue) { 
     $(this).css("background-color", "blue"); 
     blue = false; 
    } else { 
     $(this).css("background-color", "red"); 
     blue = true; 
    } 
}); 

Answer 3

, если вы на самом деле не нужно, чтобы добавить класс, то вы может добавить обработчик события щелчка, используя «один» метод, таким образом, он будет выполнен только один раз

http://api.jquery.com/one/

$("td").one("click",(function(){ 
     if(blue){ 
      $(this).css("background-color", "blue"); 
      blue = false; 
     } else { 
      $(this).css("background-color", "red"); 
      blue = true; 
     } 
    }); 

Answer 4

Я хотел бы использовать делегацию для этого, поэтому селектор для цели оценивается каждый раз при нажатии:

$('table').on('click','td:not(.done)', function(){ 
     $(this).addClass("done"); 
     if (blue) { 
      $(this).css("background-color", "blue"); 
      blue = false; 
     } else { 
      $(this).css("background-color", "red"); 
      blue = true; 
     } 
});