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。