Добавление элементов класса вместе

Question

У меня есть набор уведомлений, которые имеют общий класс. Мне нужно создать уведомление «Всего», желательно с использованием javascript / jQuery. Я пытался получить элементы классов, а затем сложить их вместе, чтобы создать общее количество. Тем не менее, я в настоящее время борюсь.

Мой текущий код выглядит так:

$(function notificationTotal() {
  var notifcationCount = document.getElementsByClassName("notificationBadge");
  alert(notificationCount);
  $('#notificationTotal').html(notifcationCount);
});

.notificationBadge {
  display: inline-block;
  background: radial-gradient( 5px -9px, circle, white 8%, red 26px);
  background-color: red;
  float: left;
  border: 1px solid white;
  border-radius: 50%;
  box-shadow: 1px 1px 1px black;
  color: white;
  font: bold 15px/13px Helvetica, Verdana, Tahoma;
  height: 15px;
  width: 15px;
  padding: 4px 3px 0 3px;
  text-align: center;
  font-size: 13px;
  font-size: 1.3rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<div id="notificationTotal" class="notificationBadge"></div>
<div id="secondNotification" class="notificationBadge">3</div>
<div id="thirdNotification" class="notificationBadge">2</div>

Мне известно, что я получаю уведомлениеВсего не определено. Тем не менее, я объявил об этом, по крайней мере ... Это может быть случай, когда я очень устал, но любая проницательность была бы очень признательна.

Answer 1

Первая проблема, с которой вы столкнулись - это опечатка. Вы использовали notificationCount и notifcationCount (обратите внимание на отсутствующие i здесь). Это необходимо исправить.

Что касается вашей цели получения суммы значений в элементах .notificationBadge, вам необходимо l oop просмотреть их все и добавить их текстовое содержимое перед установкой text() из #notificationTotal, чтобы показать вывод. Попробуйте это:

jQuery(function($) {
  var total = 0;
  $('.notificationBadge').each(function() {    
    total += parseInt($(this).text(), 10) || 0;
  });
  $('#notificationTotal').text(total);
});

.notificationBadge {
  display: inline-block;
  background: radial-gradient( 5px -9px, circle, white 8%, red 26px);
  background-color: red;
  float: left;
  border: 1px solid white;
  border-radius: 50%;
  box-shadow: 1px 1px 1px black;
  color: white;
  font: bold 15px/13px Helvetica, Verdana, Tahoma;
  height: 15px;
  width: 15px;
  padding: 4px 3px 0 3px;
  text-align: center;
  font-size: 13px;
  font-size: 1.3rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<div id="notificationTotal" class="notificationBadge"></div>
<div id="secondNotification" class="notificationBadge">3</div>
<div id="thirdNotification" class="notificationBadge">2</div>

Answer 2

Как кто-то в комментариях указал, у вас просто есть опечатка в вашем коде. Переменная, которую вы объявили, отличается от используемой внутри alert.