js购物车功能php，实战项⽬：⽤原⽣JS实现⼀个购物车的功能实战：购物车功能
⼀、两个实⽤的数组函数
1.1 Array.every()
every()⽅法传⼊回调函数，这个回调函数有三个参数，分别是：
item:⽤于测试的当前值；
index：当前测试值的索引，这是⼀个可选参数；
every:⽤于测试的数组，这也是⼀个可选参数。
该⽅法的返回值是⼀个布尔值，如果回调函数的每⼀次的测试值返回的结果都是true，那么就返回 true ，否则返回 false。
简单理解即：只要有个值不满⾜条件，就它的返回值就是false了，这个跟逻辑判断的“逻辑与”⾮常像。
1.2 Array.some()
some()⽅法传⼊回调函数，这个回调函数有三个参数，分别是：
item: 正在被处理的数组中的元素；
index: 正在被处理的数组中的元素的索引值，这是⼀个可选参数；
some: some被调⽤的数组，这也是⼀个可选参数。
该⽅法的返回值是⼀个布尔值，如果数组中的有⼀个元素满⾜回调函数⾥的条件，那么结果就返回true，如果都不满⾜才返回 false。
简单理解即：只要有⼀个值满⾜条件，它的返回值就是true，这个跟逻辑判断的“逻辑或”⾮常像。
⼆、实战项⽬：购物车
2.1 功能和效果图
2.1.1 废话不多说，⾸先上个效果图，如下：
2.1.2 功能介绍：
点击全选按钮，每⼀项商品的复选框处于被勾选的状态，同时计算出商品数量和商品总价；
点击数量切换的按钮，能⾃动计算出修改数量之后的商品数量和价格；商品的总计数量和总价格应该只计算被勾选的商品的数量和⾦额。
功能介绍完毕，下⾯开始介绍我写这个购物车的步骤。
2.2 购物车页⾯结构
原生js和js的区别
2.2.1 HTML代码
购物车
全选
图⽚品名单位单价/元数量⾦额/元iPhone 11台
4799
xxxx
⼩⽶pro 11部
3999
xxxx
MacBook Pro台
18999
xxxx
⼩⽶75电视台
5999
xxxx
Canon 90D单反台
9699
xxxx
总计:
xxxx
xxxx
2.2.2 CSS代码
table{
border-collapse:collapse;
width:90%;
text-align:center;
margin:auto;
}
table caption{
margin-bottom:15px;
font-size:1.5rem;
}
table th,table td{
border-bottom:1pxsolid#ccc; padding:5px;
font-weight:normal;
}
table thead tr:first-of-type{ background-color:#e6e6e6; height:3em;
}
table input[type="checkbox"]{ width:1.5em;
height:1.5em;
}
table tbody tr{
border-bottom:1pxsolid#ccc; }
table tbody tr:hover{ background-color:#f6f6f6; cursor:pointer;
}
tbody img{
width:3em;
}
tbody input[type="number"]{ width:3em;
}
button{
width:150px;
height:30px;
outline:none;
border:none;
background-color:teal;
color:white;
letter-spacing:5px;
button:hover{
opacity:0.7;
cursor:pointer;
}
以上就是⼀个简单的购物车页⾯的HTML和CSS样式代码，效果图：
2.3 完成相关JS代码
⾸先，我们先完成商品的全选与全不选的功能。由于我们需要操作商品的全选与单选，肯定是需要拿到全选复选框元素和商品前⾯的复选框元素，代码如下：
// 1. 获取全选复选框，所有的商品都有⼀个独⽴的复选框
constcheckAll=document.querySelector('#check-all');
ElementsByName('item');
拿到全选和每个商品的复选框元素之后，给全选框添加⼀个change事件，监听它的checked值的变化。此时全选框的checked值可以通过事件监听回调函数中的ev参数下的ev.target.checked拿到。
checkALl.οnchange=ev=>{
// 如果全选框处于选中状态，ev.target.checked的值就为true，反之，为false。
console.log(ev.target.checked);
};
如果想让全选框的的状态和每个商品前的复选框状态保持⼀致，那么就使他们的checked值⼀致即可。因此，我们可以在全选复选框的change事件中遍历每个商品的复选框元素。
checkALl.οnchange=ev=>{
// 如果全选框处于选中状态，ev.target.checked的值就为true，反之，为false。
console.log(ev.target.checked);
checkItems.forEach(item=>item.checked=ev.target.checked);
这样点击全选框的时候，就可以实现全部选中，和取消全选的功能了。效果如图：
全选和取消全选的功能完成之后，下⾯开始完善逐个勾选商品，直⾄勾选全部商品，让全选按钮⾃动变成被选中的状态。
要完成这个功能，我们可以通过对每个商品的复选框添加⼀个change事件来监听checked的变化。因此需要通过forEach()⽅法对遍历每⼀个商品。
checkItems.forEach(item=>item.οnchange=ev=>{
// 在这⾥处理每⼀项的checked值
});
此时，我们可以这样考虑：当每个商品的复选框都被勾选，即：所有商品复选框的checked的值全部为true时，全选复选框才会显⽰被勾选的状态，也就是全选复选框的checked的值也要为true。
由于checkAll的状态依赖于每⼀项商品的checked值，那么可以利⽤⼀个数组函数：Array.every()遍历每⼀项商品，当所有商品的checked值都为true时，every()⽅法的返回值就是⼀个true，然后再赋值给checkAll即可。注意：由于我们拿到的checkItems是⼀个NodeList数组，需要先将其转换成数组后再进⾏操作。
checkItems.forEach(item=>item.οnchange=ev=>{
checkAll.checked=Array.from(checkItems).every(checkItem=>checkItem.checked);
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。