如果通知计数为零我想要我现在拥有的(盒子)但是如果它不是零我想要将盒子改成带有通知计数的徽章

Question

我有一个有效的通知系统.现在,当没有通知时,通知<span class='glyphicon glyphicon-inbox' aria-hidden="true"></span>就像stackoverflow一样出现.但我的愿望是,当有通知时,我希望盒子变成一个

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

再次就像堆栈溢出一样.

因此,如果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(计数)在控制台中显示通知计数,如何在导航栏中显示此计数？

Answer 1

看起来您在 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(); 触发点击导航栏中的 <a>，这会执行 Ajax 调用。如果 Ajax 响应的计数为零，我们将隐藏notify_count范围并显示no_notify，否则执行相反的操作。

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

最佳实践是error为 AJAX 调用添加回调，以防 POST 调用get_notifications_ajax失败。