制作商品详情页面所使用的js代码
使用分页器,来分隔页面达到列表的效果
function bindHtml(list){
let str = ''
list.forEach(item =>{
str += `
<li data-id="${ item.list_id }">
<img src="${ item.list_url }" alt="">
<p>${ item.list_name }</p>
<p>¥: ${ item.list_price }</p>
</li>
`
})
$('.list ul').html(str)
}
var flag =true
var arr = []
getList()
function getList(){
$.ajax({
url:'../lib/list.json',
dataType:'json',
success:function(res){
$('.page').pagination({
pageCount:Math.ceil((res.length+1) / 12),
current : 1,
jump : true,
coping : true,
homePage : '首页',
endPage : '尾页',
prevContent : '上页',
nextContent : '下页',
callback:function(api){
let curr = api.getCurrent()
let list = res.slice((curr-1)*12,curr*12)
bindHtml(list)
}
})
bindHtml(res.slice(0, 12))
arr = res
}
})
}
let res = null
$('button').click(function(){
flag =!flag
arr.sort(function(a,b){
if(flag == true){
return a.list_price - b.list_price
}else{
return b.list_price - a.list_price
}
})
$('.page').pagination({
pageCount:Math.ceil((arr.length+1) / 12),
current : 1,
jump : true,
coping : true,
homePage : '首页',
endPage : '尾页',
prevContent : '上页',
nextContent : '下页',
callback:function(api){
let curr = api.getCurrent()
let list = arr.slice((curr-1)*12,curr*12)
bindHtml(list)
}
})
bindHtml(arr.slice(0, 12))
})
$('.list ul').on('click','li',function(){
let id =$(this).data('id')
for(let i=0;i<arr.length;i++){
if(arr[i].list_id == id){
res = arr[i]
break
}
}
localStorage.setItem('goodsInfo',JSON.stringify(res))
location.href= 'http://127.0.0.1:8080/pages/detail.html'
})
商品详情代码如下
let res = JSON.parse(localStorage.getItem('goodsInfo'))
if(res){
let str = ''
str +=`
<h2>商品详情</h2>
<div class="info hizoom gakki">
<img src="${res.list_url}" alt="">
</div>
<div class="pre" data-id="${ res.list_id }">
<p>${ res.list_name }</p>
<p>好看又能打,便宜还实惠</p>
<p>¥:${res.list_price}</p>
<button class="btn">加入购物车</button>
<a href="http://127.0.0.1:8080/pages/cart.html" target="_blank">去支付</a>
</div>
`
$('.con').html(str)
}else{
alert('您查看的商品不存在')
window.location.href = 'http://127.0.0.1:8080/pages/list.html'
}
//放大镜
$('.gakki').hiZoom({
width: 280,
position: 'right'
});
//点击事件
$('.con').on('click','.btn',function(){
let arr = JSON.parse(localStorage.getItem('cart')) || []
let ext = arr.some(item =>{
return item.list_id == res.list_id
})
if(ext){
let data = null
for(let i = 0; i < arr.length; i++){
if(arr[i].list_id == res.list_id){
data = arr[i]
break
}
}
data.number++
data.xiaoji = data.number * data.list_price
}else{
res.number = 1
res.xiaoji = res.list_price
res.isSelect = true
arr.push(res)
}
localStorage.setItem('cart',JSON.stringify(arr))
})
购物车页面使用全局渲染来完成代码如下
let carList = JSON.parse(localStorage.getItem('cart'))
bindHtml()
bindEvent()
function bindHtml(){
let selectAll = carList.every(item =>{
return item.isSelect == true
})
let str = `<div class="box">
<h2>购物车</h2>`
carList.forEach(item =>{
str +=`
<div class="info">
<div class="ckbox">
<input class="one" data-id="${item.list_id}" type="checkbox" ${ item.isSelect? 'checked':''}>
</div>
<div class="con">
<img src="${ item.list_url }" >
<span>${ item.list_name }</span>
<span>单价:${ item.list_price }</span>
<div class="add">
<button class="sub" data-id="${item.list_id}">-</button>
<span>${ item.number }</span>
<button class="add-" data-id="${item.list_id}">+</button>
<button class="del" data-id="${item.list_id}">删除</button>
</div>
<span>¥:${ item.xiaoji }</span>
</div>
</div>
`
})
let selectArr = carList.filter(item => item.isSelect)
let infoNum = 0
let infoPrice = 0
selectArr.forEach(item =>{
infoNum += item.number
infoPrice += item.xiaoji
})
str +=` <div class="foot">
<span>全选<input class="all" type="checkbox" ${selectAll ? 'checked' : ''}></span>
<span>一共${ infoNum }件商品</span>
<span>¥:${ infoPrice.toFixed(2) }</span>
<button class="pay" ${ selectArr.length? '':'disabled' }>去支付</button>
<button class="clear" >清空购物车</button>
</div>
</div>`
$('.box1').html(str)
}
function bindEvent(){
$('.box1').on('change','.all',function(){
carList.forEach(item =>{
item.isSelect = this.checked
})
bindHtml()
localStorage.setItem('cart',JSON.stringify(carList))
})
$('.box1').on('change','.one',function(){
let id = $(this).data('id')
carList.forEach(item =>{
if(item.list_id == id){
item.isSelect = !item.isSelect
}
})
bindHtml()
localStorage.setItem('cart',JSON.stringify(carList))
})
$('.box1').on('click','.sub',function(){
let id = $(this).data('id')
carList.forEach(item =>{
if(item.list_id == id){
item.number > 1? item.number-- : ""
item.xiaoji = item.list_price * item.number
}
})
bindHtml()
localStorage.setItem('cart',JSON.stringify(carList))
})
$('.box1').on('click','.add-',function(){
let id = $(this).data('id')
console.log(111)
carList.forEach(item =>{
if(item.list_id == id){
item.number++
item.xiaoji = item.list_price * item.number
}
})
bindHtml()
localStorage.setItem('cart',JSON.stringify(carList))
})
$('.box1').on('click','.del',function(){
let id = $(this).data('id')
carList = carList.filter(v => v.list_id != id)
bindHtml()
localStorage.setItem('cart',JSON.stringify(carList))
})
$('.box1').on('click','.clear',function(){
carList = []
bindHtml()
localStorage.setItem('cart',JSON.stringify(carList))
})
}
以上是所有页面的js代码