为什么不是't此AJAX函数正在更改颜色

Why this isn't this AJAX function changing color?

本文关键字：函数 颜色 AJAX 为什么不      更新时间：2023-09-26

我要做的是我有一个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收件箱需要随着计数而改变颜色。

为了实现这一点，我有这个代码

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

正如你所看到的，颜色应该是红色，但它不起作用。我想我需要把字形框的#按钮放在某个地方，但我不知道。此外，我不知道如何使计数显示在框中。

如果我在控制台中使用$("#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>

我试图让它像Stack Overflow一样，通知框随着计数而改变颜色——这可能吗？

要更改字形图标的颜色，您需要更改颜色属性而不是背景：

#notification_dropdown.notification{
  color: red;
}

在整个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);
相关文章：