JS實現添加至購物車功能
阿新 • • 發佈：2017-07-29
oct pre oat creat func tee ondrag end element
效果圖展示：
當將書拖拽至購物車一覽時：
首先將頁面的基本結構寫出來：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>加入購物車功能</title> 6 7 </head> 8 <body> 9 <ul> 10 <li draggable="true"> 11 <img src="images/img1.jpg"/> 12 <p>JavaScript語言精粹</p> 13 <p>40元</p> 14 </li> 15 <li draggable="true"> 16 <img src="images/img2.jpg"/> 17 <p>JavaScript權威指南</p> 18 <p>80元</p> 19 </li> 20 <li draggable="true"> 21 <img src="images/img3.jpg"/> 22 <p>精通JavaScript</p> 23 <p>50元</p> 24 </li> 25 <li draggable="true"> 26 <img src="images/img4.jpg"/> 27 <p>JavaScript DoM 編程藝術</p> 28 <p>40元</p>29 </li> 30 </ul> 31 <div id="div1"> 32 33 <p> 34 <span class="box1">數量</span> 35 <span class="box2">書名</span> 36 <span class="box3">單價</span> 37 </p> 38 <!-- <p> 39 <span class="box1">1</span> 40 <span class="box2">JavaScript DoM 編程藝術</span> 41 <span class="box3">40元</span> 42 </p>--> 43 </div> 44 <input id="input1" value="付款" type="submit"/> 45 </body> 46 </html>
此時需要註意因為li是可以拖拽的，需要給每個li添加draggable = "true"
再稍微添加樣式，因為主要為了實現功能，樣式就粗略一些：
<style> *{ margin:0px; padding:0px; } li{ list-style: none; width:200px; border: 1px solid #000; float: left; } img{ width:200px; } #div1{ width:400px; height:200px; border: 1px solid #000; margin:10px; float: left; clear: both; } p{ width:100%; border:1px dashed #000; clear:both; } .box1{ float:left; margin-right:20px ; } .box2{ float: left; margin-right:20px ; } .box3{ float:left; margin-right:20px ; } .allMoney{ float:right; clear: both; } #input1{ width:80px; margin-left:10px; clear: both; float: left; } </style>
此時的效果圖：
但是此時是沒有功能的，最後開始寫最主要的功能JS模塊：
window.onload = function (){ var aLi = document.getElementsByTagName("li"); var oDiv = document.getElementById("div1"); var oInput = document.getElementById("input1"); for(var i=0;i<aLi.length;i++){ aLi[i].ondragstart = function (ev){ var ev = ev||window.event; var aP = this.getElementsByTagName("p"); ev.dataTransfer.setData("title",aP[0].innerHTML); ev.dataTransfer.setData("money",aP[1].innerHTML); } oDiv.ondragover = function(ev){ var ev = ev||window.event; ev.preventDefault(); } } oDiv.ondrop = function (ev){ var ev = ev||window.event; ev.preventDefault(); var sTitle = ev.dataTransfer.getData("title"); var sMoney = ev.dataTransfer.getData("money"); var cP = document.createElement("p"); this.appendChild(cP); var span1 = document.createElement("span"); span1.className = "box1"; span1.innerHTML = "1"; cP.appendChild(span1); var span2 = document.createElement("span"); span2.className = "box2"; span2.innerHTML = sTitle; cP.appendChild(span2); var span3 = document.createElement("span"); span3.className = "box3"; span3.innerHTML = sMoney; cP.appendChild(span3); json[sTitle]=1; } } </script>
需要註意的說裏面的方法：
ondragstart 是當被拖拽元素開始拖動時發生的事件。
ondragover 是被拖拽元素拖動到目標元素身上時發生連續觸發的事件，是應該添加到目標元素身上的事件。它是有默認事件的，只有將它的默認事件阻止了，才能實現ondrog事件。
ondrog 是被拖拽元素拖到目標元素身上，然後松開鼠標時的事件。這個事件的實現必須阻止ondragover的默認事件，通過ev.preventDefault();因為圖片拖動的時候瀏覽器默認是打開圖片的，所以在這個事件裏面，我們也需要阻止它的默認事件。ev.preventDefault()。
ev.dataTransfer.setData( ， ) 是添加了一個有索引的值。第一個輸入的參數就是它的索引，第二個就是它的值。
對立的就是ev.dataTransfer.getData( )，不過它只有一個參數，就是需要得到的值的索引。
在ondrog事件裏面動態的添加購物車裏面的數據。通過appendChild加入購物車這個div裏面去。
但是此時能發現一個問題，此時當添加重復的書進去的時候，它是另外添加了一個子元素，我們需要的是應該在原來有的子元素上的數量進行累加才對。
所以對ondrog事件裏面的內容進行改進：
首先增加了幾個全局變量：
1 var oInput = document.getElementById("input1"); 2 var json = {}; 3 var allMoney = null;
然後使用在ondrog事件裏面：
1 if(!json[sTitle]){ 2 var cP = document.createElement("p"); 3 this.appendChild(cP); 4 var span1 = document.createElement("span"); 5 span1.className = "box1"; 6 span1.innerHTML = "1"; 7 cP.appendChild(span1); 8 var span2 = document.createElement("span"); 9 span2.className = "box2"; 10 span2.innerHTML = sTitle; 11 cP.appendChild(span2); 12 var span3 = document.createElement("span"); 13 span3.className = "box3"; 14 span3.innerHTML = sMoney; 15 cP.appendChild(span3); 16 json[sTitle]=1; 17 } 18 else{ 19 var oBox1 = document.getElementsByClassName("box1"); 20 var oBox2 = document.getElementsByClassName("box2"); 21 var oBox3 = document.getElementsByClassName("box3"); 22 for (var i=0;i<oBox2.length;i++){ 23 if(oBox2[i].innerHTML == sTitle){ 24 oBox1[i].innerHTML = parseInt(oBox1[i].innerHTML)+1; 25 oBox3[i].innerHTML = parseInt(oBox3[i].innerHTML)+parseInt(sMoney)+"元"; 26 } 27 } 28 } 29 if(!allMoney){ 30 allMoney = document.createElement("div"); 31 allMoney.className = "allMoney"; 32 } 33 34 var oBox3 = document.getElementsByClassName("box3"); 35 var tempMoney = 0; 36 for(var i =1;i<oBox3.length;i++){ 37 tempMoney+=parseInt(oBox3[i].innerHTML); 38 } 39 40 allMoney.innerHTML = "總價："+tempMoney+"元"; 41 42 oDiv.appendChild(allMoney); 43 44 } 45 46 47 oInput.onclick = function () { 48 alert("你需要購買商品的總價為"+allMoney.innerHTML); 49 }
在這裏通過一個Json[sTitle]來判斷購物車裏面是否已經有了這本書，，如果沒有就進行動態的添加，有的話就通過類名，找到所有已經存在購物車裏面的書的數量，名字和價格，用
一個for循環和書的名字來找到那本書的已有數量和價格，進行累加。
最後再添加了總價格的顯示和提交按鈕的一個效果。
JS實現添加至購物車功能