個(gè)人中心
退出
JavaScript做簡(jiǎn)單的購(gòu)物車效果（增、刪、改、查、克?。?/font>
比如有時(shí)候遇到下面這種情況，點(diǎn)擊加入購(gòu)物車，然后在上方的購(gòu)物車中動(dòng)態(tài)的添加商品以及商品的信息，我們就可以通過(guò)JavaScript實(shí)現(xiàn)簡(jiǎn)單的這些操作。
首先我們需要在html文檔中，通過(guò)css對(duì)頁(yè)面的布局做一些簡(jiǎn)單的設(shè)置。并創(chuàng)建兩個(gè)模板，其display屬性設(shè)為隱藏。后面再通過(guò)克隆的方法往指定的位置添加元素。大致css樣式如下：
.buy {
width: 200px;
height: 300px;
display: inline-block;
border: 1px dashed grey;
border-radius: 15px;
text-align: center;
margin: 0 20px;
padding: 5px;
box-sizing: border-box;
}
.buy img {
width: 150px;
height: 150px;
}
.buy:hover {
border-color: red;
}
上面是推薦商品中商品那個(gè)div的樣式
就上方這個(gè)例子來(lái)說(shuō)，我們需要的模板可以像下方的代碼所示：
<tr class="model2" style="display: none;">
<td>
<img src="img/img1.jpg">
</td>
<td>OPPO R15新品</td>
<td>2999</td>
<td>1</td>
<td>2999</td>
<td>
<a href="javascript:void(0)">刪除</a>
</td>
</tr>
上面的是添加到購(gòu)物車?yán)锩娴脑氐哪０濉?/p>
<div class="model1" style="display: none;">
<img src="img/img1.jpg">
<div class="desc">OPPO R15新品</div>
<div class="price">2999</div>
<div class="pay">加入購(gòu)物車</div>
</div>
上面的是添加到推薦商品中的元素的模板。
在html和css都已經(jīng)設(shè)置好了之后，我們就開(kāi)始寫js代碼，實(shí)現(xiàn)動(dòng)態(tài)的添加和刪除。
首先我們先獲取所有商品的信息，這個(gè)一般情況是從后臺(tái)數(shù)據(jù)庫(kù)那里得到，今天這個(gè)是一個(gè)簡(jiǎn)單的例子，我們就直接定義幾個(gè)商品。如下所示：
var products = [
{ img: "img/img1.jpg", desc: "OPPO R15新品", price: 2999 },
{ img: "img/img2.jpg", desc: "HUAWEI P20", price: 3788 },
{ img: "img/img3.jpg", desc: "HUAWEI P20 Pro", price: 4988 },
{ img: "img/img4.jpg", desc: "榮耀暢玩", price: 799 },
{ img: "img/img5.jpg", desc: "vivo Y69全網(wǎng)通", price: 1199 }
];
這是定義的這個(gè)商品是一個(gè)數(shù)組，所以我們可以用數(shù)組的forEach（）方法，實(shí)現(xiàn)一下將數(shù)據(jù)添加到網(wǎng)頁(yè)之中。
products.forEach(function (pro) {
var copy = $(".model1")[0].cloneNode(true);//克隆模板
// console.log(copy);
copy.className = "buy";//改變克隆的模板的class類名
copy.style.display = "inline-block";//將克隆的元素從隱藏轉(zhuǎn)換為顯示，因?yàn)榭赡苡卸鄠€(gè)，所以我們將其轉(zhuǎn)換為行內(nèi)塊
var _children = copy.children;//獲取克隆元素的所有子節(jié)點(diǎn)，并重新賦值
_children[0].src = pro.img;
_children[1].innerHTML = pro.desc;
_children[2].innerHTML = pro.price;
$(".box")[0].appendChild(copy);//將克隆好的并做了修改的dom元素添加到指定位置。
});
經(jīng)過(guò)上面的代碼之后，我們已經(jīng)在網(wǎng)頁(yè)中動(dòng)態(tài)的添加了一些元素?cái)?shù)據(jù)。接下來(lái)就是實(shí)現(xiàn)添加購(gòu)物車以及刪除的功能。
實(shí)現(xiàn)添加以及刪除的代碼如下：
var btns = $(".pay");//獲取所有需要添加功能的元素
for (var i = 0, len = btns.length; i < len; i++) {
btns[i].onclick = function () {
var mes = this.parentNode.children;//獲取點(diǎn)擊的那個(gè)元素的父節(jié)點(diǎn)的所有子節(jié)點(diǎn)，然后再分別獲取其中的值
// console.log(mes);
var img = mes[0].src,//獲取圖片的路徑
desc = mes[1].innerHTML,//獲取desc信息
price = mes[2].innerHTML;//獲取價(jià)格信息
var copy = $(".model2")[0].cloneNode(true);//克隆模板
// console.log(img, desc, price);
copy.className = "";//修改類名
copy.style.display = "table-row";//讓元素顯示
var _child = copy.children;//給模板中的元素修改value值
_child[0].firstElementChild.src = img;
_child[1].innerHTML = desc;
_child[2].innerHTML = price;
_child[4].innerHTML = price*1;
$(".carbox table")[0].appendChild(copy);//添加到指定位置
copy.lastElementChild.firstElementChild.onclick = function () {//為刪除綁定點(diǎn)擊事件
copy.parentNode.removeChild(copy);//點(diǎn)擊刪除的時(shí)候，相當(dāng)于刪除的添加的這一行
}
}
}
這樣一個(gè)簡(jiǎn)單的動(dòng)態(tài)添加，修改數(shù)據(jù)，刪除，類似購(gòu)物車的效果就做好了。
注：查找的dom對(duì)象何時(shí)需要加[0]下標(biāo)：
當(dāng)通過(guò)class名或者標(biāo)簽名獲取對(duì)象的時(shí)候，然后又要對(duì)這個(gè)對(duì)象使用一些節(jié)點(diǎn)的方法的時(shí)候，就需要添加下標(biāo)。因?yàn)檫@個(gè)時(shí)候返回的是一個(gè)偽數(shù)組，也可以說(shuō)是一個(gè)集合，它并不是一個(gè)dom元素或者說(shuō)是一個(gè)節(jié)點(diǎn)。所以需要給它添加一個(gè)下標(biāo)，來(lái)調(diào)用這個(gè)集合中的dom元素。
歡迎關(guān)注微信公眾號(hào):猴哥說(shuō)前端
分類導(dǎo)航