我的项目日志后续

制作商品详情页面所使用的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代码