Warum ändert diese AJAX-Funktion nicht die Farbe?

Question

Was ich versuche zu tun ist, habe ich glyphicon Box und wenn es eine Benachrichtigung gibt, möchte ich die Box, um seine Farbe mit der Anzahl der Benachrichtigung zu ändern. Ich denke, ich bin fast da, aber es wird einfach nicht funktionieren. Ich habe inspiziert, aber CSS kommt nicht durch. Also, hier ist was ich getan habe.

Ich habe dies in navbar

<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> 

So glyphicon-Posteingang muss ihre Farbe mit der Zählung ändern.

Um das zu erreichen, dass ich diesen Code

<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> 

wenn Benachrichtigung Zahl == 0, ich habe

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

sonst

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

Und für CSS habe ich haben diese

#notification_dropdown{ 
} 

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

Wie Sie sehen, sollte die Farbe rot sein, aber es tut nicht den Trick. Ich denke, ich muss #button irgendwo für die Glyphikon-Box platzieren, aber ich weiß es nicht. Außerdem bin ich mir nicht sicher, wie man die Zählung in der Box erscheinen lässt.

Wenn ich $("#notification_dropdown") in Konsole bekomme ich

<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> 

Ich versuche es wie Stack-Überlauf zu machen, die Box-Benachrichtigung Farbe auf es mit der Zählung zu ändern - ist das möglich?

Answer 1

die Farbe eines glyphicon ändern - Sie müssen die Farbe Eigenschaft nicht den Hintergrund ändern:

#notification_dropdown.notification{ 
    color: red; 
} 

Answer 2

Gibt es ein Element gibt es mit der gleichen id ‚notification_dropdown‘ in ganzen html? Bitte überprüfen Sie HTML und finden Sie mit dieser ID. Es kann in der versteckten Form sein. In diesem Fall kann es sein, dass die CSS auf dieses versteckte Element anstatt auf dieses sichtbare Element angewendet wird.

und wenn ja, dann versuchen:

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

oder

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

starten:

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