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

📅  最后修改于: 2021-11-24 05:38:28             🧑  作者: Mango

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

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

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

  • Font Awesome 中图标的 CDN 链接:
  • HTML代码:
HTML



 

    
    
    
    
    
    
    

 

    
        
        
        
            

GeeksforGeeks

            

Icon with count Badge:                                                                      5                             

            
            
                                  
    
   


CSS


javascript


html



 

    
    
    
    
    
    
    
    

 

    
        
        
        
            

GeeksforGeeks

            

Icon with count Badge:                                                                      5                             

            
            
                                  
    
 


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

  • CSS代码:

CSS


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

javascript


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

html




 

    
    
    
    
    
    
    
    

 

    
        
        
        
            

GeeksforGeeks

            

Icon with count Badge:                                                                      5                             

            
            
                                  
    
                 

输出

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