Почему JQuery не меняет цвет текста после клика

Question

JQuery должен при нажатии на кнопку менять ее цвет фона и цвет текста. Почему-то меняется только цвет заднего фона, а цвет текста не хочет меняться ни при каких обстоятельствах. Аналогичный код у всех работает.

$('.done_button').click(function(){
  $(this).css({
    "background": "#36FF17",
    "color": "#000000!important",
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="task unselectable">
    <div class="task_name">Задача</div>
    <div class="done_button unselectable">Сделано</div>
    <div class="not_done_button unselectable">Не сделано</div>
</div>

Answer 1

Вам нужно убрать !important в свойстве color, так как при использовании функции css(), данные стили добавляются автоматически в сам тег:

То есть при нажатии на Сделано, то jQuery поменяет тег следующим образом

<div 
  class="done_button unselectable"
  style="background: rgb(54, 255, 23); color: rgb(0, 0, 0);">Сделано
</div>

$('.done_button').click(function(){
  $(this).css({
    "background": "#36FF17",
    "color": "#ff0019",
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="task unselectable">
    <div class="task_name">Задача</div>
    <div class="done_button unselectable">Сделано</div>
    <div class="not_done_button unselectable">Не сделано</div>
</div>

БЛОГ НА HUSL

Почему JQuery не меняет цвет текста после клика

Ответы (1 шт):