如何在没有通知的情况下从通知栏中删除“0” - 并在有通知时删除样式

Question

我正在为我的rails应用程序构建通知系统。该方法有效，更新表等，一切正常。现在我想在没有未读通知的情况下不显示0。当有通知时我希望能够设置样式（就像这里的绿色矩形一样）。

not IFC A tion.JSON.coffee:

class Notifications
  constructor: ->
    @notifications = $("[data-behavior='notifications']")


    if @notifications.length > 0
      @handleSuccess @notifications.data("notifications")
      $("[data-behavior='notifications-link']").on "click", @handleClick

      setInterval (=>
        @getNewNotifications()
      ), 50000

  getNewNotifications: ->
    $.ajax(
      url: "/notifications.json"
      dataType: "JSON"
      method: "GET"
      success: @handleSuccess
    )

  handleClick: (e) =>
    $.ajax(
      url: "en/notifications/mark_as_read"
      dataType: "JSON"
      method: "POST"
      success: ->
        $("[data-behavior='unread-count']").text(0)
    )

  handleSuccess: (data) =>
    items = $.map data, (notification) ->
      notification.template

    unread_count = 0
    $.each data, (i, notification) ->
      if notification.unread
        unread_count += 1

    $("[data-behavior='unread-count']").text(unread_count)
    $("[data-behavior='notification-items']").html(items)



jQuery ->
  new Notifications

在我看来，我有以下几点：

<li class="nav-item btn-group" data-behavior="notifications" data-notifications='<%= render template: "notifications/index", formats: [:json] %>'>
  <div class="dropdown-toggle nav-link" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-behavior="notifications-link">
    <span data-behavior="unread-count" class="fas fa-bell"></span>
  </div>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton" data-behavior="notification-items">
  </div>
</li>

它目前看起来像这样：

Answer 1

0来自handleClick中的这一行，只需替换为您想要的任何文本：

$("[data-behavior='unread-count']").text("")

并在更新中：

unread_count = 0
$.each data, (i, notification) ->
  if notification.unread
    unread_count += 1
if(unread_count == 0) unread_count = ""
$("[data-behavior='unread-count']").text(unread_count)