首先我们先理一下思路:
第一步:获取元素;
第二步:实现递增递减的状态,数量递减的时候并且不能为负数;
第三步:全选和每一项选择的一个状态;
第四步:计算出总数和总价格并写入页面:
第五步:实现删除效果,并改变数据。
第一步先获取
写出来添加的点击事件
for (var i = 0; i < add.length; i++) {//
(function (ind) {
add[ind].onclick = function () {
var num = data[ind].num;//找到数据里的数量
num++;//点击同时数量 递增
data[ind].num = num;//改变数据
nums[ind].innerHTML = num;//写入页面
data[ind].sum = data[ind].num * data[ind].now_price;//计算出数据里的总金额
sums[ind].innerHTML = data[ind].sum;//写入页面
getNum();
}
})(i)
}
for (var i = 0; i < jian.length; i++) {
(function (ind) {
jian[ind].onclick = function () {
var num = data[ind].num;
if (num > 1) {
num--;
data[ind].num = num;
nums[ind].innerHTML = num;
data[ind].sum = data[ind].num * data[ind].now_price;
sums[ind].innerHTML = data[ind].sum;
}
getNum()
}
})(i)
}
all_check.onclick = function () {//全选的点击事件
var bool = all_check.checked;//获取全选状态
for (var i = 0; i < every_check.length; i++) {//循环每个单选框
every_check[i].checked = bool;//单选框的选中状态与全选状态一致
data[i].isChecked = bool;//改变数据
}
getNum()
}
for (var i = 0; i < every_check.length; i++) {//循环每个单选框
(function (ind) {
every_check[ind].onclick = function () {//当单选框发生改变时
data[ind].isChecked = !data[ind].isChecked;//数据里的选中状态也发生改变,即相反的状态
var val = data.every(function (item) {//利用迭代方法every,实现单选框全部选中的时,全选框才会选中
return item.isChecked;
})
all_check.checked = val;
getNum()
}
})(i)
}
getNum()
function getNum() {//计算总价
var shop = 0,
money = 0;
for (var i in data) {//遍历数据
if (data[i].isChecked) {//当数据里是选中状态时
shop++;//总数量递增
money += data[i].sum;//总价格是所以数据里总价格之和
}
}
ready_num.innerHTML = shop;//写入页面
ready_sum.innerHTML = money;
}
for (var i = 0; i < dels.length; i++) {//循环遍历删除按钮
(function (ind) {
dels[ind].onclick = function () {//当当前删除按钮点击时
data.splice(ind, 1);//数据里删除当前项
getContent()
}
})(i)
}
}
网友评论