Как посчитать количество уведомлений на иконке?

Опубликовано: 1 Декабря, 2021

Bootstrap предоставляет нам значки для отображения счетчиков на значке, которые можно использовать для отображения непрочитанных уведомлений / сообщений и т. Д. Нам нужно получить значение счетчика на значке значка и соответствующим образом обновить это значение. В этой статье мы создадим значок уведомления, который может содержать подсчет, как непрочитанное уведомление. Мы разделим это на два разных раздела: в первом разделе мы создадим структуру значка, а во втором разделе мы разработаем значок и сделаем значок адаптивным.

Подход: мы продолжим следующие шаги, чтобы гарантировать, что мы всегда можем получить номер уведомления / количество значков для значка независимо от структуры DOM.

Помещение значка и значка под один и тот же элемент.
Использование функции jQuery find () для извлечения счетчика.
Увеличить / уменьшить количество значков из извлеченного значения.
Обновите значение.

Создание структуры: Ниже приведен пример кода, который мы будем использовать в качестве шаблона. Наконец, мы применим jQuery в соответствии с постановкой задачи для следующего.

Ссылки CDN для иконок из Font Awesome:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js”></script>

HTML код:

 <!-- Final Solution -->
 <!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>
    h 1 {
        color : green ;
       }
   .badge {
        position : relative ;
        top : -20px ;
        left : -25px ;
        border : solid black 1px ;
        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: это последний код, который представляет собой комбинацию двух вышеуказанных разделов, создающих структуру и структуру проектирования.

 <!-- Final Solution -->
 <!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 > 

Выход :

Technical Scripter Вопросы о Web технологиях JQuery Picked HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

Как посчитать количество уведомлений на иконке?

РЕКОМЕНДУЕМЫЕ СТАТЬИ