javascript - 将一个类的元素加在一起

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>

我知道我收到 notificationTotal 未定义。但是，我至少已经声明了......这可能是我很累的情况，但任何见解都将不胜感激。

Answer 1

您遇到的第一个问题是打字错误。您已经使用了 notificationCount 和 notifcationCount(注意此处缺少的 i)。这需要更正。

关于获取 .notificationBadge 元素中总值的目标，您需要遍历它们并在设置 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>