如何通过 javascript 隐藏徽章

Question

如您所见，以下代码片段生成了一个 bootstrap 5 导航栏，带有堆叠字体超棒的图标和徽章，我想编辑徽章的数据计数并通过 [= 隐藏徽章30=] 但我不知道该怎么做，有人可以帮我吗？

我试过了：

document.getElementsByClassName("p1 fa-stack fa-2x has-badge")[0].className = "p1 fa-stack fa-2x"

document.getElementsByClassName("p1 fa-stack fa-2x has-badge")[0].attributes["data-count"].value=""

#ex4 {
    color: white;
    width: auto;
}

#ex4 .p1[data-count]:after {
    position: absolute;
    right: 10%;
    top: 8%;
    content: attr(data-count);
    font-size: 40%;
    padding: .2em;
    border-radius: 50%;
    line-height: 1em;
    color: white;
    background: rgba(255, 0, 0, .85);
    text-align: center;
    min-width: 1.5em;
}

form.logout {
  margin-left: 10px;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

  <!-- Font awesome-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Page style -->
  <link rel="stylesheet" href="CSS/index.css">

  <!-- Title -->
  <title>Title</title>
</head>

<body>
  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Social Feed</a>
      <div class="d-flex align-items-center">
        <div class="dropdown">
          <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
            <div id="ex4">
              <span class="p1 fa-stack fa-2x has-badge" data-count="4">
                <i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
              </span>
            </div>
          </a>
          <div class="dropdown-menu dropdown-menu-end">
            <div id="notifications-header">
              <h1>Notifications</h1>
            </div>
            <div id="notifications">

            </div>
          </div>
        </div>
        <form a name="logout" class="logout" action="PHP/Logout.php" method="get">
          <button type="submit" class="btn btn-danger">Log Out</button>
        </form>
      </div>
    </div>
  </nav>
</body>

</html>

Answer 1

您应该改用 dataset：

const badge = document.getElementsByClassName("p1 fa-stack fa-2x has-badge")[0];
badge.dataset.count = '4'

但我建议不要在 document.getElementsByClassName 中使用许多 class 名称，因为如果您更改其中一个 class，您也需要更新此代码，并且您可能让自己陷入困境。

您可以为它分配一个特定的 class，例如 badge，或者简单地为它分配一个 id

...
<span class="p1 fa-stack fa-2x has-badge" data-count="4" id="badge">
  <i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
</span>
...

const badge = document.querySelector("#badge");
badge.dataset.count = '4'

为了隐藏它，可以这样写：

#ex4 .p1.has-badge:after {
    position: absolute;
    right: 10%;
    top: 8%;
    content: attr(data-count);
    font-size: 40%;
    padding: .2em;
    border-radius: 50%;
    line-height: 1em;
    color: white;
    background: rgba(255, 0, 0, .85);
    text-align: center;
    min-width: 1.5em;
}

只需将 [data-count] 替换为 .has-badge，这样您就可以通过切换 has-badge class.

来隐藏徽章

const badge = document.querySelector("#badge");
badge.dataset.count = '4'
badge.classList.remove('has-badge')

Answer 2

对于数据计数，请使用@pooria 的回答。

用于隐藏，CSS:

#ex4 .hidden.p1[data-count]:after {
  display: none;
}

... 并且，JS:

const badge = document.getElementsByClassName("p1 fa-stack fa-2x has-badge")[0];

// this changes the data
badge.dataset.count = '7';

// this hides it
badge.classList.add('hidden');

如何通过 javascript 隐藏徽章

How to hide badge via javascript

html

javascript

font-awesome

bootstrap-5