                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /用JS實現(xiàn)購物車特效

已解決該問題，沒法刪除，寫個標(biāo)題~~~ 感興趣的可以看看我js代碼的注釋，適合新手小白看看，全選有個錯誤

和老師做的一樣，單行選擇之前的功能都可以實現(xiàn)，粘了老師的代碼都不對，在數(shù)量框中寫超過1的數(shù)字，并且點擊多次才可以實現(xiàn)單行刪除功能，點擊一次沒反應(yīng)，有人遇到這種狀況嗎？本人IE瀏覽器，HBuilder編寫

qq_安莜_04255791

2017-12-23

源自：用JS實現(xiàn)購物車特效 2-12

關(guān)注問題我要回答

1651

操作

收起

4 回答

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

全選里面錯誤：if(tr[i].checked)=>if(input.checked)

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

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

上面的var deleteAll=document.getElementById("deleteAll");被我注釋了，但是不注釋也出不來效果，問題還是一樣，，，，

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

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>

? ? ? ? ? ? ? ? ?<span class="arrow">●<span>●</span></span>

</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++){

//三個===是絕對相等，類型和值都相等；兩個==是值相等，對比的時候會自動轉(zhuǎn)換類型

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

ret.push(els[i]);//傳出的一定是篩選后的classname

}

return ret;

}

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

//cartTable.chilren獲取對應(yīng)ID下的子節(jié)點，rows是表格中特有屬性，存放該節(jié)點下所有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="";//創(chuàng)建一個空的字符串，用來存放字符串

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也是表格特殊屬性，用于取節(jié)點的所有td

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

//選中后背景有顏色

tr[i].className="on";

//點擊之后顯示下面的圖片,把此處的src寫成tr對應(yīng)下的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顯示兩位小數(shù)

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(){

//設(shè)置全選都選上

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();

}

//控制下方圖片出現(xiàn)隱藏

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;

}

//觸發(fā)當(dāng)前事件的原對象，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();//點擊取消商品，商品圖片隱藏，這個是錯誤的，不能直接調(diào)用！??！

input.onclick();//點擊取消商品，數(shù)字也跟著變化

}

//計算框

? ? 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){//防止為空和輸入除數(shù)字之外的字符

? ? val=1;

? ? }

? ? this.value=val;

? ? if(val<=1){

? ? reduce.innerHTML="";

? ? }else{

? ? reduce.innerHTML="-";

? ? }getSubTotal(tr);//parentNode是取選中元素的父節(jié)點

? ? 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;//默認(rèn)全選

? ? ? ? checkAllInput[0].onclick(); ??

? ? }

}

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

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

全選刪除也有提示，但是也無法實現(xiàn)商品刪除，，，是我瀏覽器問題，還是其他的什么，，，新手小白求指導(dǎo)

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

舉報

0/150

提交

取消

用JS實現(xiàn)購物車特效

參與學(xué)習(xí) 43240 人
解答問題 175 個

通過JavaScript實現(xiàn)類似淘寶網(wǎng)絡(luò)購物車功能效果

進(jìn)入課程

本課相似問答

2 回答這個案例，有兩個問題，一個是一個個勾選到全部后，全選不會打勾，其二，選中刪除，不會更新下面的選中數(shù)量及總價

1 回答有沒有大神幫我看看這段程序哪里有問題？為啥我點加減都沒有效果

3 回答全選功能有問題，如果反過來，一個一個選擇后，全選卻沒有勾上，這是為什么

1 回答代碼js那覺得有問題

2 回答有一個地方功能不完善吧？刪除所有選中的之后，foot中結(jié)算前的已選數(shù)量和總價應(yīng)該有所變化吧？

搜索更多本課相關(guān)問答

已解決該問題，沒法刪除，寫個標(biāo)題~~~ 感興趣的可以看看我js代碼的注釋，適合新手小白看看，全選有個錯誤

我要回答關(guān)注問題

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

已解決該問題，沒法刪除，寫個標(biāo)題~~~ 感興趣的可以看看我js代碼的注釋，適合新手小白看看，全選有個錯誤

4 回答

本課相似問答

已解決該問題，沒法刪除，寫個標(biāo)題~~~ 感興趣的可以看看我js代碼的注釋，適合新手小白看看，全選有個錯誤

已解決該問題，沒法刪除，寫個標(biāo)題~~~ 感興趣的可以看看我js代碼的注釋，適合新手小白看看，全選有個錯誤

已解決該問題，沒法刪除，寫個標(biāo)題~~~ 感興趣的可以看看我js代碼的注釋，適合新手小白看看，全選有個錯誤