なぜこれがAJAX関数の色を変更していないのですか？

Question

私がしようとしているのは、グリフィンボックスがあるということです。通知がある場合、そのボックスの色を通知の数で変更します。私はほとんどそこにいると思うが、それはうまくいかない。私は点検したが、CSSは通らない。それでは私がしたことがここにあります。

私はそうglyphicon-受信トレイは、カウントして、その色を変更する必要があるナビゲーションバー

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

でこれを持っています。

は、通知カウント== 0、私は他の

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

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

を持っている場合、私はこのコード

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

を持っていることを達成し、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

いずれかの要素がありますが、全体のhtmlの「notification_dropdown」同じIDを持つ存在しますか？ htmlを調べて、このIDで見つけてください。それは隠された形であるかもしれません。その場合、この可視要素ではなく隠れ要素にCSSが適用される可能性があります。

、はい、次にしようとした場合：

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