购物车shopping-cart问题

在做商城的时候要写一个购物车的样式：



在做最后一行进行商品数量计算以及金额计算的时候，遇到一点问题：

<ul aria-labelledby="dropdownMenu1">
<li class="product">
<ul class="clearfix">
<li class="pro-img">  <img src="img/product1.png" /> </li>
<li class="pro-name"> <a><p>智能打火机 烟民的健康卫士</p> </a>  </li>
<li class="pro-cost">
<p>  ￥ <span class="pro-price">299</span> * <span class="pro-amount">2</span> </p>
<b  class="pro-remove">删除</b>
</li>
</ul>
</li>
<li class="product">
<ul class="clearfix">
<li class="pro-img">  <img src="img/product1.png" /> </li>
<li class="pro-name"> <a><p>智能打火机 烟民的健康卫士</p> </a>  </li>
<li class="pro-cost">
<p>  ￥ <span class="pro-price">299</span> * <span class="pro-amount">2</span> </p>
<b  class="pro-remove">删除</b>
</li>
</ul>
</li>
</ul>
<figure class="pro-total clearfix">
<p>共 <span class="total-nums"> 2</span>件商品   <strong class="total-price"> 188 元</strong></p>
<a href="product.html">去购物车</a>
</figure>

更清楚的结构图贴上来：





下面是JQ部分

var num=0;
function count(){
$(".pro-amount").each(function(){
num+=parseInt( $(this).text() ) ;
});
$(".total-nums").text(num);
}
count();

有一个类似的例子：





点击li会在.box中生成一个新的绿色小方块出来，当点击绿色方块就会消失，有点像淘宝那种选择购买条件然后再次点击就消失的效果。

我的思路是，设置一个数组，当点击li时候，Li的文本内容会添加进这个数组，然后.box的子元素只要按照数组生成即可。

于是先写一个循环输出数组元素的例子：

var arr = [ "冬季", "女款"   , "长筒" , "靴子" , "黑色" ];
//console.log(arr);
$.each(arr, function(index,value) {
$("<b>").text( arr[index] ).appendTo(".box");
});

看一下效果：



出来了。

所以下一步是在点击li的时候，将li的内容传进数组中。

我是这样写的

var myArray =[];
$("li").each(function  () {
$(this).on("click" ,function  () {
myArray.push($(this).text() );
console.log( myArray);
})
})

当依次点击所有的li之后，我们看看打印出什么：



现在做添加的一步：

var myArray =[];
$("li").each(function  () {
$(this).on("click" ,function  () {
myArray.push($(this).text() );
//console.log( myArray);
$.each(myArray, function(index,value) {
$("<b>").text( myArray[index] ).appendTo(".box");
});
})
})

现在就有问题了，看看结果



不对，因为在点击第二个按钮是，都会包含前一个按钮的内容。

所以有两个解决办法：1 每次查询 .box ， 先判断是否有相同的文本，没有的话才可以添加 2 不形成数组 点击直接加入 box

我们现在试试第二种方案：

$("li").each(function  () {
$(this).on("click" ,function  () {
$("<b>").text( $(this) ).appendTo(".box");
})
})

这样也会出问题，加入你连续点击两次则相同的li继续添加。所以又遇到问题,需要先判断是否有相同的文本，没有的话才可以添加；

所以现在要解决的问题是，在添加之前判断box中的文本内容：

$("li").each(function  () {
var liText = $(this).text();
$(this).click(function  () {
var bArray = [];
$("b").each(function(){
bArray.push( $(this).text()  )
});
var find = $.inArray(liText, bArray);
if ( find == -1) {
$("<b>").text( liText ).appendTo(".box");
}
});
});

这样就解决了重复添加的问题。

下一步是当点击box 中的绿色方块的时候，消失。

$("li").each(function  () {
var liText = $(this).text();
$(this).click(function  () {
var bArray = [];
$("b").each(function(){
bArray.push( $(this).text()  )
});
var find = $.inArray(liText, bArray);
if ( find == -1) {
$("<b>").text( liText ).appendTo(".box");
}
aboutb();
});
});
function aboutb () {
$("b").on("click",function  () {
$(this).detach();
})
}

完成。

最后直接上网址：

http://www.webmxx.com/Blog/html/clickli.html

http://www.webmxx.com/Blog/newshop/product.html