这里主要是为了体现面向对象的思维,也就是js部分的内容,所以布局比较简单,仅供参考,可以后期自己修改
首先附上css部分
<style>
#cont{width:1000px;overflow: hidden;margin: 30px auto;border: solid 1px black;}
#cont .goods{width: 250px;float: left;border: solid 1px black;box-sizing: border-box;text-align: center;}
.goods img{width: 80%;}
.goods span{display: block;margin: 10px 0;}
.goods p{margin: 0;height: 40px;line-height: 20px;overflow: hidden;}
.goods input{display: block;margin: 0 auto;}
</style>
html布局
被注释部分只是为了方便下面js的数据拼接,用ES6新增的语法可以很容易的拼接数据
现在正式开始咯
<script>
let data = [{
img:"https://img12.360buyimg.com/n7/jfs/t1/39543/8/11748/122729/5d2edfcbE100bb150/5afccb1354c96752.jpg",
price:"79.00",
name:"南野田园 番石榴红心 红心芭乐 台湾新鲜芭乐 新鲜水果 孕妇水果 京东生鲜 红心芭乐5斤装 ( 送酸梅粉)",
goodsId:"111111"
},{
img:"https://img11.360buyimg.com/n1/s190x190_jfs/t1/105599/34/11005/165579/5e27b8acEbc72f156/7e994f565512bd2d.jpg",
price:"178.00",
name:"【顺丰空运】山东大樱桃大连车厘子京东新鲜",
goodsId:"2222222"
},{
img:"https://img14.360buyimg.com/n7/jfs/t1/18248/19/11660/84851/5c91d394E37adf3ee/14e0df1095c42dbf.jpg",
price:"32.00",
name:"寻味君 甜杨桃5斤 新鲜水果京东",
goodsId:"3333333"
},{
img:"https://img14.360buyimg.com/n7/jfs/t25519/90/761689188/694412/a788e670/5b7bd4bbN6f5e9cdb.jpg",
price:"88.00",
name:"【推荐】丹东肥沃的黑土地孕育了草莓的香甜口感【新鲜】每天现摘现发,精选好果,产地直发",
goodsId:"4444444"
}];
class GoodsList{
constructor(){
this.data = data;
this.cont = document.getElementById('cont')
}
init(){
var str = '';
for(var i=0;i<data.length;i++){
str += `<div class="goods" index="${ this.data[i].goodsId }">
<img src="${ this.data[i].img }" alt="" srcset="">
<span>${ this.data[i].price }</span>
<p>${ this.data[i].name }</p>
<input type="button" value="加入购物车" class="add">
</div>`
}
this.cont.innerHTML = str;
}
addEvent(){
var that = this;
this.cont.onclick = function(eve){
var e = eve || window.event;
var tar = e.target || e.srcElement;
if(tar.className === "add"){
that.goodsId = tar.parentNode.getAttribute("index");
that.setData();
}
}
}
setData(){
// console.log(this.goodsId);
// var gm = localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
// if(gm.length < 1){
// // 1-1.没有存过,直接存
// gm.push({
// goodsId:this.goodsId,
// num:1,
// msg:当前商品的所有数据
// });
var gm = localStorage.getItem("goodsMsg");
if(gm === null){
// 1-1.没有存过,直接存
gm = [{
goodsId:this.goodsId,
num:1,
msg:this.getData(this.goodsId)
}];
}else{
gm = JSON.parse(gm);
// 1-2.存过数据了
// 先判断,这次点的,在老数据中有没有
var zhuangtai = 0;
for(var i=0;i<gm.length;i++){
// 1-2-1.有:数量+1
if(gm[i].goodsId === this.goodsId){
gm[i].num++;
zhuangtai = 1;
break;
}
}
if(zhuangtai == 0){
// 1-2-2.没有:给数组,新增一个数据
gm.push({
goodsId:this.goodsId,
num:1,
msg:this.getData(this.goodsId)
})
}
}
// 以上这个if里面只是在判断操作获取到的数据,并没有存回去,所以最终操作完之后,需要将数据存到本地存储中
localStorage.setItem("goodsMsg",JSON.stringify(gm));
}
// 单独封装为了方便获取所有数据中,某个数据的功能
// 根据传入的id获取
getData(id){
// 遍历的时候,比较,符合,返回这个数据
for(var i=0;i<this.data.length;i++){
if(this.data[i].goodsId === id){
return this.data[i];
}
}
// 没有符合,返回空对象,保持数据格式一致
return {};
}
}
var gl = new GoodsList();
gl.init();
gl.addEvent();
</script>
data里的数据是我们模拟的后端数据,后期是不需要的,这里仅用的js,所以就先自己模拟
另外链接也都是自己随便上京东找的图片地址链接。
到此为止,简单的商品列表就实现了,购物车的实现下一篇见!