js button onclick 傳參_用js去寫一個簡單的購物車

學了這麼多天的js，要開始寫案例了，今天寫了一個簡單的購物車，給大家看一下

首先需要有一些資料，

name: 'LANCÔME 蘭蔻 新菁純絲絨霧面唇膏 505 3.4克',

yuan_price: 270,

now_price: 259,

num: 1,

sum: 259,

img: '1.png',

isChecked: true

先寫一個資料吧

css樣式就不說了，直接上js，首先先渲染頁面

var str = '';

for (var i in data) {

// console.log(data[i].name) //每一項

//${data[i].isChecked ? 'checked' : ''} 是為了渲染單選框的初始選中狀态

str += `<ol>

<li>

<input type="checkbox" name="" class = "every_checked" ${data[i].isChecked ? 'checked' : ''} >

<img src="./imgs/${data[i].img}" alt="">

</li>

<li>

${data[i].name}

</li>

<li>

<del><p>${data[i].yuan_price}</p></del>

<p>${data[i].now_price}</p>

</li>

<li>

<button class="jian">-</button>

<input type="text" value = ${data[i].num} class = "input1">

<button class="jia">+</button>

</li>

<li class = "now_price">

${data[i].sum}

</li>

<li class = "del">删除</li>

</ol>`

}

content.innerHTML = str;

然後開始從加号寫起，

var jia = document.querySelectorAll('.jia') 擷取加号

for (var i in jia) {

// jia[i].ind = i;

// // 周遊全部，保留目前項

// jia[i].onclick = function () {

// // 點選事件

// data[this.ind].num++

// // 資料裡目前的數量加加

// jian[this.ind].disabled = false;

// // 打開點選開關

// input1[this.ind].value = data[this.ind].num

// // input裡的數量要和單價同步,拿到這個數

// data[this.ind].sum = data[this.ind].num * data[this.ind].now_price

// // 總價等于目前數量乘以單價

// aaa[this.ind].innerHTML = data[this.ind].sum;

// // 寫入到頁面

// getZongjia()

// }

for (var i in jian) {

// jian[i].ind = i;

// // 周遊全部，保留目前項

// jian[i].onclick = function () {

// // 點選事件

// if (input1[this.ind].value <= 1) {

// // 如果input裡的數量小于1 判斷合不合理

// jian[this.ind].disabled = true;

// // 減号就關閉

// } else {

// data[this.ind].num--

// input1[this.ind].value = data[this.ind].num

// data[this.ind].sum = data[this.ind].num * data[this.ind].now_price

// aaa[this.ind].innerHTML = data[this.ind].sum;

// // 或者打開

// }

// getZongjia()

// }

// //點選全選

// var quanxuan = document.getElementById('quanxuan')

// var every_checked = document.querySelectorAll('ol li .every_checked')

// //全選反選

// quanxuan.onclick = function () {

// var bool = quanxuan.checked;

// for (var i = 0; i < every_checked.length; i++) { //周遊每一項單選

// every_checked[i].checked = bool; //每一個單選= 全選

// data[i].isChecked = bool //同步資料裡的單選=全選

// }

// getZongjia()

// }

// // 由單選去觸發全選

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

// every_checked[i].index = i; //留下标記

// every_checked[i].onclick = function () { //給每一個複選框一個點選事件

// var nowChecked = every_checked[this.index].checked; //擷取目前商品的選中狀态

// // console.log(nowChecked)

// data[this.index].isChecked = nowChecked; //更新資料

// var all_quanxuan = data.every(function (item) { //用every去周遊每一項是否為true

// return item.isChecked; //結果是每一項為true或者flase

// })

// quanxuan.checked = all_quanxuan; //把周遊後的結果賦予全選時的點選狀态

// getZongjia()

// }

// }function getZongjia() {

// var sum_num = 0; // 商品數量

// var zongjia = 0;//商品總和

// for (var i = 0; i < every_checked.length; i++) { //循環複選框每一項

// if (data[i].isChecked) { //判斷是否為選中狀态

// sum_num += data[i].num; //商品數量加資料裡每一項的數量 因為要循環，是以會不斷疊加

// zongjia += data[i].sum; //商品總價 加上資料裡每一項的總價

// }

// }

// yixuan_num.innerHTML = sum_num; //寫入頁面

// yixuan_zongjia.innerHTML = zongjia;

// }

// getZongjia()

// var del = document.querySelectorAll('.del') //擷取删除鍵

// for (var i = 0; i < del.length; i++) { //周遊每一次删除

// del[i].ind = i; //留下标記

// del[i].onclick = function () { //給删除一個點選事件

// data.splice(this.ind,1) //删除資料裡的目前點選的第一項下标1

// // console.log(data)

// getHtml(data)

// }

// }

// }

上圖瞅一下

哈哈哈 有點醜啊，見諒見諒~