Question

我想要做的是我有一个glyphicon框，如果有通知，我希望该框改变其颜色与通知的计数。我想我差不多了，但它不起作用。我检查过，但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-inbox需要使用计数更改其颜色。

要实现这一点，我有这个代码

<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放在某个地方用于glyphicon-box，但我不知道。此外，我不确定如何在框中显示计数。

如果我在控制台中使用$("#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中是否存在具有相同ID“notification_dropdown”的元素？请检查html并通过此ID查找。它可能是隐藏的形式。在这种情况下，可能有可能将css应用于该隐藏元素而不是此可见元素。

如果是，请尝试：

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

或

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

试试这个：

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

为什么这个AJAX函数不会改变颜色？

2 个答案: