如何计算一个图标上的通知数量

如何计算一个图标上的通知数量？

Bootstrap为我们提供了在图标上显示计数的徽章，可以用来显示未读通知/消息等。我们需要获取图标徽章上的计数值，并相应地更新该值。在这篇文章中，我们将创建一个通知图标，可以像未读通知那样进行计数。我们将分为两个不同的部分，在第一部分，我们将创建图标的结构，在第二部分，我们将设计图标并使其具有响应性。
方法：我们将进行以下步骤，以确保无论DOM结构如何，我们都能获得图标的通知数/徽章数。

将图标和徽章包裹在同一个元素下。
使用jQuery find()函数来提取计数。
从提取的值中增加/减少徽章的数量。
更新该值。

创建结构：下面是一个示例代码，我们将把它作为一个模板。最后，我们将根据问题的陈述，应用jQuery来完成以下工作。

来自Font Awesome的图标的CDN链接。

<script src=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js”></script>

HTML代码:

<!-- 最终解决方案 -->
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js">
    </script>
</head>
 
<body>
    <div class="container-fluid">
        <br>
        <br>
        <center>
            <h1>GeeksforGeeks</h1>
            <h4>Icon with count Badge:
 
               <!-- Wrapping the icon and badge -->
               <span id="group">
                 <button type="button" class="btn btn-info">
                  <i class="fa fa-envelope"></i>
                 </button>
                 <span class="badge badge-light">5</span>
               </span>
            </h4>
            <br>
            <br>
            <button class="btn btn-danger">
                <i class="fas fa-minus"></i>
              Subtract
            </button>
            <button class="btn btn-success">
                <i class="fas fa-plus"></i>
              Addition
            </button>
        </center>
    </div>
</body>
 
 
</html>

设计结构：在这一节中，我们将设计结构并使图标也具有响应性。

CSS代码:

<style>
    h1 {
        color:green;
       }
   .badge {
        position: relative;
        top: -20px;
        left: -25px;
        border: 1px solid black;
        border-radius: 50%;
       }
    button {
        margin:5px;
       }
</style>

JavaScript代码。该方法的实施完全取决于开发者，DOM结构取决于所需的使用情况。开发者没有必要将徽章与图标放在同一个元素中。

<script>
    // Use find() function to extract the badge
    // count from '#group' container.
     $(document).ready(function() {$ (".btn").click(function() {
            var val = parseInt( $('#group').find('.badge').text()); // Check for the button clicked if ($ (this).hasClass('btn-danger')) {
                 $('#group').find('.badge').text(val - 1); } else if ($ (this).hasClass('btn-success')) {
                $('#group').find('.badge').text(val + 1);
            }
        });
    });
</script>

注：稍后我们将通过链式分组，在徽章上应用jQuery，而不考虑开发者的实现方式。
结合HTML、CSS和JavaScript代码：这是最后的代码，是上述两部分创造结构和设计结构的结合。

<!-- 最终解决方案 -->
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js">
    </script>
    <style>
        h1 {
            color:green;
        }
        .badge {
            position: relative;
            top: -20px;
            left: -25px;
            border: 1px solid black;
            border-radius: 50%;
        }
        button {
            margin:5px;
        }
    </style>
</head>
 
<body>
    <div class="container-fluid">
        <br>
        <br>
        <center>
            <h1>GeeksforGeeks</h1>
            <h4>Icon with count Badge:
 
               <!-- Wrapping the icon and badge -->
               <span id="group">
                 <button type="button" class="btn btn-info">
                  <i class="fa fa-envelope"></i>
                 </button>
                 <span class="badge badge-light">5</span>
               </span>
            </h4>
            <br>
            <br>
            <button class="btn btn-danger">
                <i class="fas fa-minus"></i>
              Subtract
            </button>
            <button class="btn btn-success">
                <i class="fas fa-plus"></i>
              Addition
            </button>
        </center>
    </div>
</body>
<script>
   
    // Use find() function to extract the badge
    // count from '#group' container.
     $(document).ready(function() {$ (".btn").click(function() {
            var val = parseInt( $('#group').find('.badge').text()); // Check for the button clicked if ($ (this).hasClass('btn-danger')) {
                 $('#group').find('.badge').text(val - 1); } else if ($ (this).hasClass('btn-success')) {
                $('#group').find('.badge').text(val + 1);
            }
        });
    });
</script>
 
</html>

输出 :

如何计算一个图标上的通知数量？