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)

// }

// }

// }

上图瞅一下

哈哈哈 有点丑啊，见谅见谅~