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

Bootstrap 为我们提供了徽章来显示图标上的计数，可用于显示未读通知/消息等。我们需要获取图标徽章上的计数值并相应地更新该值。在本文中，我们将创建一个通知图标，它可以像未读通知一样保持计数。我们将把它分成两个不同的部分，在第一部分，我们将创建图标的结构，在第二部分，我们将设计图标并使图标具有响应性。
方法：我们将继续执行以下步骤，以确保无论 DOM 结构如何，我们始终可以获取图标的通知编号/徽章计数。

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

创建结构：下面是我们将用作模板的示例代码。最后，我们将根据以下问题陈述应用 jQuery。

• Font Awesome 中图标的 CDN 链接：

 
 

• HTML代码：

HTML

 

    
    
    
    
    
    
    
    
    
    
    

 

    
        
        
        
            GeeksforGeeks
            Icon with count Badge:
 
               
               
                 
                  
                 
                 5
               
            
            
            
            
                
              Subtract
            
            
                
              Addition
            
        
    

 
 

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

• CSS代码：

CSS

• JavaScript 代码：该方法的实现完全取决于开发人员，而 DOM 结构取决于所需的用例。开发人员不必将徽章与图标组合在同一元素中。

javascript

   
    // 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);
            }
        });
    });

注意：稍后我们将通过链接在徽章上应用 jQuery 来对其进行分组，而不管开发人员的实现如何。
结合 HTML、CSS 和 JavaScript 代码：这是最后的代码，它是以上两部分创建结构和设计结构的组合。

html

 

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

 

    
        
        
        
            GeeksforGeeks
            Icon with count Badge:
 
               
               
                 
                  
                 
                 5
               
            
            
            
            
                
              Subtract
            
            
                
              Addition
            
        
    


   
    // 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);
            }
        });
    });

 
               

输出：

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。