Question

所以如果（count == 0） {我希望对通知框没有影响} 其他 {我希望通知框变成红色} 所以这就是我所做的，但它不起作用。 by不起作用我的意思是没有任何反应，我通过检查元素检查了css，但没有任何东西......

      <style>
          {% block style %}
        #notification_dropdown.notification { background: red; }
        {% endblock %}
          </style>
    <li class="dropdown">
                  <a href="#" class="dropdown-toggle notification-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<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>
    <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>

我添加了$("#notification_dropdown").removeClass('notification');

和$("#notification_dropdown").addClass('notification'); 在if和else之后。

然后我用css ... 我做错了什么？

Answer 1

以下是回答问题的最小化示例：带有元素的HTML和用于触发/测试JS代码的按钮：

<ul class="dropdown-menu" role="menu" id='notification_dropdown'>
Notification text
</ul>

<a href="#" id="button">Button</a>

CSS：

#notification_dropdown{
  background-color: green;
}

#notification_dropdown.notification{
  background-color: red;
}

和JavaScript代码：

myButton = $("#button");

count = 0;

myButton.click( function() {
  myQuery = $("#notification_dropdown");
  console.log( count );

  if( count == 0 )
  {
    myQuery.removeClass( "notification" );
  }
  else
  {
    myQuery.addClass( "notification" );
  }

  // This is done just for the test matter
  count++; 
});

只需在按钮上多次单击即可触发相关的click功能，该功能也会更改count（用于测试目的）。 JQuery保存在变量myQuery中，以避免多次实现相同的查询，没有明确的目的。

Try is on JSFiddle

如果不算=== 0，我希望我的通知框的背景变成红色...我该怎么做？

1 个答案: