Почему это не функция AJAX, меняющая цвет?

Question

То, что я пытаюсь сделать, это ящик с глификоном, и если есть уведомление, я хочу, чтобы ящик менял свой цвет с подсчетом уведомления. Я думаю, что я почти там, но это просто не сработает. Я проверял, но CSS не проходит. Итак, вот что я сделал.

У меня есть это в навигационной панели

<li class="dropdown"> 
<a href="#" class="dropdown-toggle notification-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="button"> 
<span class='glyphicon glyphicon-inbox' aria-hidden="true"></span> 
<span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu" id='notification_dropdown'> 

       </ul> 
      </li> 

Так glyphicon-ящик должен изменить свой цвет с графом.

Для достижения этой цели у меня есть этот код

<script> 
    $(document).ready(function(){ 
     $(".notification-toggle").click(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: "{% url 'get_notifications_ajax' %}", 
      data: { 
      csrfmiddlewaretoken: "{{ csrf_token }}", 
      }, 
     success: function(data){ 
      $("#notification_dropdown").html(' <li role="presentation" class="dropdown-header">Notifications</li>'); 
      var count = data.count 
      console.log(count) 
      if (count == 0) { 
        $("#notification_dropdown").removeClass('notification'); 
       var url = '{% url "notifications_all" %}' 
       $("#notification_dropdown").append("<li><a href='" + url+ "'>View All Notifications</a></li>") 
      } else { 
        $("#notification_dropdown").addClass('notification'); 
       $(data.notifications).each(function(){ 
       var link = this; 
       $("#notification_dropdown").append("<li>" + link + "</li>") 
       }) 
      } 
      console.log(data.notifications); 
      }, 
      error: function(rs, e) { 
      console.log(rs); 
      console.log(e); 
      } 
     }) 
     }) 
    }) 
    </script> 

если количество уведомлений == 0, у меня есть

$("#notification_dropdown").removeClass('notification'); 

еще

  $("#notification_dropdown").addClass('notification'); 

И для CSS У меня есть этот

#notification_dropdown{ 
} 

#notification_dropdown.notification{ 
    background-color: red; 
} 

Как вы видите, цвет должен быть красным, но это не делает трюк. Я думаю, мне нужно разместить #button для глификон-бокса, но я не знаю. Кроме того, я не уверен, как сделать счет в поле.

Если я использую $("#notification_dropdown") в консоли я получаю

<ul class="dropdown-menu notification" role="menu" id="notification_dropdown"> <li role="presentation" class="dropdown-header">Notifications</li><li><a href="/notifications/164/?next=/post/test0/">content</a></li><li><a href="/notifications/165/?next=/post/test0/">content</a></li></ul> 

Я пытаюсь сделать это как переполнение стека, окно уведомления меняющегося цвета с графом на нем - это возможно?

Answer 1

изменить цвет glyphicon - вам нужно изменить свойство цвета не фон:

#notification_dropdown.notification{ 
    color: red; 
} 

Answer 2

Есть ли какой-либо элемент существует с тем же идентификатором «notification_dropdown» в целом HTML? Проверьте этот html и найдите этот идентификатор. Это может быть в скрытой форме. В этом случае могут быть шансы, что css будет применяться к этому скрытому элементу вместо этого видимого элемента.

и если да, то попробуйте:

$("#notification_dropdown:visible").removeClass('notification'); 

или

$("#notification_dropdown:visible").addClass('notification'); 

Попробуйте это:

setTimeout(function(){ 
    $("#notification_dropdown:visible").addClass('notification'); 
}, 2000);