JQuery/PHP

JQuery+each遍历相同class名元素的值并计算总和

也想出现在这里?联系我们
创客云

近期,有客户开发代建网站,其中有一个要求,就是自动计算某个值的总和。实现这样的需求有二种方法,一种是使用 PHP 直接将输出的值计算总和。另一种就是通过 JQUERY 代码来计算总和。由于此项目使用 PHP 计算并不方便,所以考虑使用第二种通过 JQUERY 来计算。使用 JQUERY 来计算,我们需要使用二个知识点:

  • 一个是通过 each 遍历同 CLASS 名的所有元素;
  • 另一个是 JQUERY 计算总和;

以下是实现这些功能 HTML 代码:

也想出现在这里?联系我们
创客主机
  1. <li class="bmw" data-price="250000">250000</li>
  2. <li class="bmw" data-price="350000">350000</li>
  3. <li class="bmw" data-price="450000">450000</li>
  4. <li class="bmw" data-price="550000">550000</li>

JQUERY 代码:(通过 each 遍历并得到所有元素的数组)

  1. var varList = new Array();
  2. $(".bmw").each(function(index, el) {
  3. varList[index] = el.dataset.price;
  4. });
  5. console.log("varList:"+varList);//输出所有元素的数组

再计算一下数字的总和:

  1. var sum=0;
  2. $(".bmw").each(function(index, el) {
  3. sum = el.dataset.price*1 + sum*1;
  4. });
  5. console.logo(sum);//得到数据总和
资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!