Javascript 如果通知计数为零，我想要我现在拥有的（框），但如果它'；s不是零我想把盒子改成带通知计数的徽章

我有一个有效的通知系统。现在，无论是否没有通知，通知都会显示在一个

中，就像stackoverflow一样。但我的愿望是，当有通知时，我想把盒子变成一个盒子

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

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

（我的问题是）

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

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

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

通知计数

---

2） 我可以使用console.log（count）在console中显示通知的计数，如何在导航栏中显示此计数？

看起来您在AJAX成功中所做的所有更改都在

#notification_下拉列表中

但是在您的导航栏HTML中，您想要切换的

元素从未被触摸过。在CSS中也是一样的：

更改：将

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>

---

$（“.notification toggle”）。单击（），以防对
获取通知\u AJAX
的POST调用失败。
实现这一点的一个简单方法是使用
setInterval（）
每隔几秒钟查询服务器以获取新通知。代码如下所示：

HTML

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





JS

<script>
  setInterval(function(){
    $.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>")
              // here we change the inbox appearance
              $("#inbox-wrapper").html("<span class='glyphicon glyphicon-inbox' aria-hidden='true'></span>");
            } else {
                  $("#notification_dropdown").addClass('notification');
              $(data.notifications).each(function(){
                var link = this;
                $("#notification_dropdown").append("<li>" + link + "</li>")
              // change the inbox appearance
              $("#inbox-wrapper").html("<span class='badge badge-notify' style='background-color:red'>" + count + "</span>");
              })
            }
            console.log(data.notifications);
          },
          error: function(rs, e) {
            console.log(rs);
            console.log(e);
          }
        });
  }, 5000);
</script>


setInterval（函数（）{
$.ajax({
类型：“POST”，
url:“{%url'获取通知\u ajax%}”，
数据：{
csrfmiddlewaretoken:“{{csrf_令牌}}”，
},
成功：功能（数据）{
$（“#通知#下拉列表”）.html（“
报警”
”；
var count=data.count
console.log（计数）
如果（计数=0）{
$（“#通知#下拉列表”）.removeClass（“通知”）；
var url=“{%url”通知_所有“%}”
$（“通知”下拉列表）。追加（“
”）
//这里我们更改收件箱的外观
$（“#收件箱包装器”）.html（“”）；
}否则{
$（“通知”下拉列表”）.addClass（“通知”）；
$（data.notifications）.each（函数（）{
var-link=这个；
$（“#通知”下拉列表）。追加（“
”+链接+”
”）
//更改收件箱的外观
$（“#收件箱包装器”）.html（“+count+”）；
})
}
console.log（数据通知）；
},
错误：函数（rs，e）{
控制台日志（rs）；
控制台日志（e）；
}
});
}, 5000);

我对您的代码进行了以下更改：

1） 我添加了一个带有id的
div
来包装收件箱，以简化HTML交换（同时我还修复了“活动”收件箱的样式属性
span
）

2） 我将代码从收件箱单击事件移动到
setInterval
函数。
这样，您就不必在打开收件箱下拉列表时发送AJAX请求，因为您已经每5秒发送一次了

3） 我将通知计数添加到inbox元素中
您需要在javascript中使用
setInterval（）
每隔几秒钟查询一次服务器通知，否则，您的前端将如何知道任何更改？@jegesh我已经设置了它，但没有区别。我正确地理解您希望在
单击时切换通知计数？或者，即使用户没有做任何事情，但出现了一个通知，您是否希望它更改？现在，您的代码只在用户单击锚时检查是否有通知。如果您想继续检查用户是否有通知，请考虑使用<代码> SETIN（）/代码>，这将使Ajax请求每次X秒。@ Iulia.我希望通知框在通知时自动变成红色，就像stackoverflow@mikebraa看我的回答,，我想我解决了你所有的问题。红色不起作用只是HTML中的一个问题。style属性需要被赋予有效的CSS.hello当我阅读你的代码时，我有点理解，但当我尝试复制和粘贴你的代码时，我无法打开通知框…我看到了控制台，但没有错误…对不起，不能更详细…也许我会发布图片，看起来像我只是想给你一个正确的方向推，显然，您必须根据您的具体情况调整HTML和代码。非常感谢您，您的解决方案工作得非常完美，我想我理解其中的大多数，但我添加了error-tho，error:function（rs，e）{console.log（rs）；console.log（e）；我认为您正在谈论处理错误情况的方法。这取决于您想要采用的用户体验策略。您可以决定始终指示失败（可能是将Glyphion收件箱与Glyphion感叹号重叠）或者，如果您决定将失败视为非关键性的，只需保持当前的
错误
回调不变，并希望下一次调用成功。如果调用从未成功怎么办？好吧。这取决于您想做什么。只有在连续3个请求失败时，才可能显示
！
。您有很多选项，可以选择一个对您的用户来说最有意义
 <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>

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

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

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

<script>
  setInterval(function(){
    $.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>")
              // here we change the inbox appearance
              $("#inbox-wrapper").html("<span class='glyphicon glyphicon-inbox' aria-hidden='true'></span>");
            } else {
                  $("#notification_dropdown").addClass('notification');
              $(data.notifications).each(function(){
                var link = this;
                $("#notification_dropdown").append("<li>" + link + "</li>")
              // change the inbox appearance
              $("#inbox-wrapper").html("<span class='badge badge-notify' style='background-color:red'>" + count + "</span>");
              })
            }
            console.log(data.notifications);
          },
          error: function(rs, e) {
            console.log(rs);
            console.log(e);
          }
        });
  }, 5000);
</script>