博客

我在做项目的时候，出现的问题是：购物商场总是获取第一件商品，其后的商品就不能获取了。

还有的是jQuery获取数值计算后显示结果为NAN，解决在此链接里：

https://blog.csdn.net/qq_39625703/article/details/101679164

显示页面结果只能显示第一条数据。

html代码：

下面是jQuery代码：

<script type="text/javascript">
//计算数量方法
function totalNum(){
         var sumNum = 0;
         $("#buyNum").each(function () {
        	 sumNum += parseInt($(this).text());
         });
         $(".cartSumNumber").text(sumNum);
}
//计算总价方法
function totalPrice(){
	//计算总价，编写总价方法
         var zong = 0;
         $("#cartPrice").each(function () {
        	 zong += parseInt($(this).text()); 
         });
         $(".Sum").text(zong);
}
//加载页面时，调用总价方法
$(function(){
	 totalNum();
	 totalPrice();	//调用总价方法
});
</script>	

我发现，我的jQuery获取错了，不应该是获取id。因为我的是循环出来后，有很多相同的元素。

1. 
   ID选择器使用ID来选择元素，例：
   
   $(“#buyNum”).each(…){…}
   
   ，当只需要选择一个元素时，使用ID选择器。
   
2. 
   class选择器使用CSS class 来选择元素，例：
   
   $(“.buyNum”).each(…){…}
   
   ，如果需要选择具有相同 CSS class的元素，就要用class 选择器。
   

解决方法：

1.把 #buyNum改成 .buyNum （这种简单点）

function totalNum(){
         var sumNum = 0;
         $(".buyNum").each(function () {
        	 sumNum += parseInt($(this).text());
         });
         $(".cartSumNumber").text(sumNum);
}
function totalPrice(){
         var zong = 0;
         $(".cartPrice").each(function () {
        	 zong += parseInt($(this).text()); 
         });
         $(".SumPrice").text(zong);
}

2. 也可改成这样：

function totalNum(){
         var sumNum = 0;
         $("span[id='buyNum']").each(function () {
        	 sumNum += parseInt($(this).text());
         });
         $(".cartSumNumber").text(sumNum);
}
function totalPrice(){
         var zong = 0;
         $("span[id='cartPrice']").each(function () {
        	 zong += parseInt($(this).text()); 
         });
         $(".SumPrice").text(zong);
}

正常显示结果如图：