使用jQuery计算HTML元素data-item-rate属性值总和

你的核心需求是遍历所有带data-item-rate属性的<p>元素，把它们的属性值加总，但当前代码存在两个问题：空的属性值会导致总和变成NaN，而且直接使用.data()取值可能会遇到字符串拼接的问题。下面是修正后的方案：

修正后的jQuery实现 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>
  <p id="bilingual_rate" data-item-rate="50">50 $</p>
  <p id="domain_rate" data-item-rate="50">50 $</p>
  <p id="hosting_rate" data-item-rate="250">250 $</p>
  <p id="ssl_rate" data-item-rate=""></p>
  <p id="gmaps_rate" data-item-rate=""></p>
  <p id="admin_rate" data-item-rate=""></p>
  <p id="ga_rate" data-item-rate=""></p>
  <p id="catalogue_rate" data-item-rate=""></p>
  <p id="online-store_rate" data-item-rate=""></p>
  <p id="blog_rate" data-item-rate=""></p>
  <p id="gallery_rate" data-item-rate=""></p>
  <p id="contact-form_rate" data-item-rate=""></p>
  <p id="newsletter_rate" data-item-rate=""></p>
</div>
<script>
function updateTotal() {
  let total = 0;
  $('p[data-item-rate]').each(function() {
    // 将属性值转为数字，空值/非数字值默认取0
    const rate = parseFloat($(this).data('item-rate')) || 0;
    total += rate;
  });
  alert(total); // 最终会弹出350
}

// 调用函数测试
updateTotal();
</script>

关键改进点 #

• 类型转换：用parseFloat()把从data-item-rate获取到的字符串转为数字，避免直接相加时出现字符串拼接的问题
• 空值处理：通过|| 0确保空字符串、非数字值不会让总和变成NaN，而是当作0来计算

原生JS实现（无需jQuery） #

如果你不想依赖jQuery，也可以用原生JS完成同样的功能：

function updateTotal() {
  let total = 0;
  // 选择所有带data-item-rate属性的p元素
  const rateElements = document.querySelectorAll('p[data-item-rate]');
  
  rateElements.forEach(element => {
    // 利用dataset获取属性值，转换为数字后处理空值
    const rate = parseFloat(element.dataset.itemRate) || 0;
    total += rate;
  });
  
  alert(total);
}

updateTotal();

内容的提问来源于stack exchange，提问作者PacPac