我有一个有效的通知系统。现在，无论是否有通知，通知都会出现在 <span class='glyphicon glyphicon-inbox' aria-hidden="true"></span> 中。就像计算器一样。但我的愿望是当有通知时，我希望盒子变成一个

<span class="badge badge-notify" style="red">notification count</span> 

再次就像堆栈溢出一样。

所以我尝试删除一个特定的类，该类在 if count == 0 时更改框的形式，并在 count 不为零时添加该类。我也尝试设置设置间隔，但它不起作用。

你能帮帮我吗？

下面是我在导航栏中的内容，我设置了通知框和徽章。

   <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> 
<span class="badge badge-notify">notification count</span></a>
    <ul class="dropdown-menu" role="menu" id='notification_dropdown'>

              </ul>
            </li>

下面是我显示通知的ajax函数

 <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">alarm</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</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>

所以我有点尝试的是这个，

        <style>
          {% block style %}
    #notification_dropdown{
    }

    #notification_dropdown.notification{
      color: red;
    }


        {% endblock %}
          </style>

and 

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

也许我把 id 设置错了...不幸的是那些什么也没做。

不确定是否需要这个，我还会添加通知功能(ajax)

def get_notifications_ajax(request):
    if request.is_ajax() and request.method == "POST":
        notifications = Notification.objects.all_for_user(MyProfile.objects.get(user=request.user)).recent()
        count = notifications.count()
        notes = []
        for note in notifications:
            notes.append(note.get_link.encode('utf-8'))
        data = {
            "notifications": notes,
            "count": count,
        }
        print data
        json_data = json.dumps(data)
        print json_data
        return HttpResponse(json_data, content_type='application/json')
    else:
        raise Http404

所以我的问题)

1) 当通知不为零时通知框的形式/颜色没有改变我做错了什么，我如何实现我想要的是将框变成一个

<span class="badge badge-notify" style="red">notification count</span> 

2) 我可以使用 console.log(count) 在控制台中显示通知计数，如何在导航栏中显示此计数？

最佳答案

看起来您在 AJAX 成功中所做的所有更改都在 #notification_dropdown 上但在你的导航栏 HTML 中 <span>您想要切换的元素永远不会被触及。它在你的 CSS 中是一样的:

    <style>
      {% block style %}
#notification_dropdown{
}

#notification_dropdown.notification{
  color: red;
}


    {% endblock %}
      </style>

使用的 CSS 选择器 ( #notification_dropdown ) 不会将 CSS 属性应用于 <span>重要的元素。

解决这个问题的方法之一 -

将您的导航栏 HTML 更改为:

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

              </ul>
            </li>

更改:添加了 id属性no notify和 notify count badge span元素。

和

将您的 Ajax 脚本更改为:

 <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">alarm</li>');
            var count = data.count
            console.log(count)

            if (count == 0) {
                  $("#notify_count").html(count).hide();
                  $("#no_notify").show();

                  $("#notification_dropdown").removeClass('notification');
              var url = '{% url "notifications_all" %}'
              $("#notification_dropdown").append("<li><a href='" + url+ "'>view all</a></li>")
            } else {
              $("#no_notify").hide();
              $("#notify_count").html(count).show();

                  $("#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>

更改:添加了 $("#no_notify")和 $("#notify_count")与 show() 相关的行/ hide() 这些跨度基于 count

并将您的 setTimeout 更改为:

 <script>
   setTimeout(function(){
        $(".notification-toggle").click();
   }, 2000);
 </script>

$(".notification-toggle").click(); triggers a click在导航栏中的 上，它执行 Ajax 调用。如果来自 Ajax 响应的计数为零，我们将隐藏 notify_count跨越并显示 no_notify否则做相反的事情。

触发对 标记的点击似乎是个好主意。如果将来您希望计数更新仅在用户操作(单击 anchor 标记)时发生并且不希望调用定期发生，您所要做的就是摆脱 setTimeout逻辑。

最佳做法是添加 error 也为您的 AJAX 调用回调，以防万一 POST 调用 get_notifications_ajax失败。

关于javascript - 如果通知计数为零，我想要我现在拥有的(框)，但如果它不为零，我希望将框更改为带有通知计数的徽章，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36673262/