                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /用JS实现购物车特效

已解决该问题，没法删除，写个标题~~~ 感兴趣的可以看看我js代码的注释，适合新手小白看看，全选有个错误

和老师做的一样，单行选择之前的功能都可以实现，粘了老师的代码都不对，在数量框中写超过1的数字，并且点击多次才可以实现单行删除功能，点击一次没反应，有人遇到这种状况吗？本人IE浏览器，HBuilder编写

qq_安莜_04255791

2017-12-23

源自：用JS实现购物车特效 2-12

关注问题我要回答

1611

操作

收起

4 回答

qq_安莜_04255791 提问者
2017-12-23

全选里面错误：if(tr[i].checked)=>if(input.checked)

0 回复有任何疑惑可以回复我~

收起回答

qq_安莜_04255791 提问者
2017-12-23

上面的var deleteAll=document.getElementById("deleteAll");被我注释了，但是不注释也出不来效果，问题还是一样，，，，

0 回复有任何疑惑可以回复我~

收起回答

qq_安莜_04255791 提问者
2017-12-23

我的html源代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

</td>

</tr>

</td>

</tr>

</td>

</tr>

</td>

</tr>

</td>

</tr>

</td>

</tr>

</td>

</tr>

</td>

</tr>

</tbody>

</table>

已选商品

<span id="selectedTotal">0</span>件

</div>

</div>

</div>

</body>

</html>

我的js源代码：

window.onload=function(){

//兼容IE，因为IE不支持getElementByClassName

if(!document.getElementsByClassName){

document.getElementsByClassName=function(cls){

var ret=[];

var els=document.getElementsByTagName("*");

for(var i=0;i<els.length;i++){

var txt=els.className.split(" ");

for(var j=0;j<txt.length;j++){

//三个===是绝对相等，类型和值都相等；两个==是值相等，对比的时候会自动转换类型

if(txt[j]===cls){

ret.push(els[i]);//传出的一定是筛选后的classname

}

return ret;

}

var cartTable=document.getElementById("cartTable");

//cartTable.chilren获取对应ID下的子节点，rows是表格中特有属性，存放该节点下所有tr元素

var tr=cartTable.children[1].rows;

var checkInput=document.getElementsByClassName("check");

var checkAllInput=document.getElementsByClassName("check_all");

var selectedTotal=document.getElementById("selectedTotal");

var priceTotal=document.getElementById("priceTotal");

//小计

function getSubTotal(tr){

var tds=tr.cells;

var price=parseFloat(tds[2].innerHTML);

var count=parseInt(tr.getElementsByTagName("input")[1].value);

var SubTotal=parseFloat(price*count);

tds[4].innerHTML=SubTotal.toFixed(2);

}

//计算

function getTotal(){

var selected=0;

var price=0;

var HTMLstr="";//创建一个空的字符串，用来存放字符串

for(var i=0;i<tr.length;i++){

if(tr[i].getElementsByTagName("input")[0].checked==true){//checked是判断是否被选中，如果选中，值为true，反之false

selected+=parseInt(tr[i].getElementsByTagName("input")[1].value);

//cells也是表格特殊属性，用于取节点的所有td

price+=parseFloat(tr[i].cells[4].innerHTML);

//选中后背景有颜色

tr[i].className="on";

//点击之后显示下面的图片,把此处的src写成tr对应下的src，用index属性存放是第几行

HTMLstr+='<div class="divchange"><img class="imgchange" src="'+tr[i].getElementsByTagName('img')[0].src+'"/><sapn class="del" index="'+i+'">取消选择</span></div>';

}else{//取消选中后背景无颜色

tr[i].className="";

}

selectedTotal.innerHTML=selected;

priceTotal.innerHTML=price.toFixed(2);//toFixed显示两位小数

selectedViewList.innerHTML=HTMLstr;//把ID为selectedViewList的div里面的值替换为HTMLstr里面的值

if(selected==0){//商品没有被选中浮层也自动隐藏

foot.className="foot";

}

for(var i=0;i<checkInput.length;i++){

checkInput[i].onclick=function(){

//设置全选都选上

if(this.className=="check_all check"){

for(var j=0;j<checkInput.length;j++){

checkInput[j].checked=this.checked;

}

}//又一个不选取消全选

if(this.checked==false){

for(var k=0;k<checkAllInput.length;k++){

checkAllInput[k].checked=false;

}

//全部选上显示全选

var t = 0

for(var x=0;x<checkInput.length;x++){

if(checkInput[x].checked==true){

t++;

}

if(t==(checkInput.length-checkAllInput.length)){

for(var z=0;z<checkAllInput.length;z++){

checkAllInput[z].checked = true;

}

getTotal();

}

//控制下方图片出现隐藏

var selected=document.getElementById("selected");

var arrow_up=document.getElementsByClassName("arrow up");

var arrow_down=document.getElementsByClassName("arrow down");

var foot=document.getElementById("foot");

var selectedViewList=document.getElementById("selectedViewList");

var spandown=document.getElementsByClassName("spandown");

var divchange=document.getElementsByClassName("divchange");

// var deleteAll=document.getElementById("deleteAll");

selected.onclick=function(){

if(foot.className=="foot"){

if(selectedViewList.innerHTML!=0){//如果没有选择商品，那么下面的div隐藏

foot.className="foot show";

}

}else{

foot.className="foot";

}

selectedViewList.onclick=function(e){

//兼容IE

//还可以写成e=e||window.event;如果逻辑或前面为真，则取前；若前面为假，则取后面（前后都假，也取后）。

if(e){

e=e;

}else{

e=window.event;

}

//触发当前事件的原对象，srcElement是IE下的属性，target是火狐下的属性

var el=e.srcElement;

if(el.className=="del"){

//getAttribute获得元素下指定属性的属性值

var index=el.getAttribute("index");

var input=tr[index].getElementsByTagName("input")[0];

input.checked=false;

// selected.onclick();//点击取消商品，商品图片隐藏，这个是错误的，不能直接调用！！！

input.onclick();//点击取消商品，数字也跟着变化

}

//计算框

for(var i=0;i<tr.length;i++){

tr[i].onclick=function(e){

var el=e.srcElement;

var cls=el.className;

var input=this.getElementsByTagName("input")[1];

var val=parseInt(input.value);

var reduce=this.getElementsByTagName("span")[1];

switch(cls){

case "add":

input.value=val+1;

reduce.innerHTML="-";

getSubTotal(this);

break;

case "reduce":

if(input.value>1){

input.value=val-1;

}

if(input.value<=1){

reduce.innerHTML="";

}

getSubTotal(this);

break;

case "operation":

var conf = confirm('确定要删除吗？');

if (conf) {

this.parentNode.removeChild(this);

}

break;

default:

break;

}

getTotal();

}

tr[i].getElementsByTagName("input")[1].onkeyup=function(){

var val=parseInt(this.value);

var tr=this.parentNode.parentNode;

var reduce=tr.getElementsByTagName("span")[1];

if(isNaN(val)||val<1){//防止为空和输入除数字之外的字符

val=1;

}

this.value=val;

if(val<=1){

reduce.innerHTML="";

}else{

reduce.innerHTML="-";

}getSubTotal(tr);//parentNode是取选中元素的父节点

getTotal(tr);

}

deleteAll.onclick=function(){

if (selectedTotal.innerHTML != '0') {

var conf=confirm("确定删除这些吗？");

if(conf){

for(var i=0;i<tr.length;i++){

var input=tr[i].getElementsByTagName("input")[0];

if(tr[i].checked){

tr[i].parentNode.removeChild(tr[i]);

i--;

}

checkAllInput[0].checked = true;//默认全选

checkAllInput[0].onclick();

}

0 回复有任何疑惑可以回复我~

收起回答

qq_安莜_04255791 提问者
2017-12-23

全选删除也有提示，但是也无法实现商品删除，，，是我浏览器问题，还是其他的什么，，，新手小白求指导

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

用JS实现购物车特效

参与学习 43235 人
解答问题 167 个

通过JavaScript实现类似淘宝网络购物车功能效果

进入课程

本课相似问答

2 回答这个案例，有两个问题，一个是一个个勾选到全部后，全选不会打勾，其二，选中删除，不会更新下面的选中数量及总价

1 回答有没有大神帮我看看这段程序哪里有问题？为啥我点加减都没有效果

3 回答全选功能有问题，如果反过来，一个一个选择后，全选却没有勾上，这是为什么

1 回答代码js那觉得有问题

2 回答有一个地方功能不完善吧？删除所有选中的之后，foot中结算前的已选数量和总价应该有所变化吧？

搜索更多本课相关问答

已解决该问题，没法删除，写个标题~~~ 感兴趣的可以看看我js代码的注释，适合新手小白看看，全选有个错误

我要回答关注问题

热搜

最近搜索清空

已解决该问题，没法删除，写个标题~~~ 感兴趣的可以看看我js代码的注释，适合新手小白看看，全选有个错误

4 回答

本课相似问答

已解决该问题，没法删除，写个标题~~~ 感兴趣的可以看看我js代码的注释，适合新手小白看看，全选有个错误