HTML+CSS+JS大学生作业作品练习

作品源码：

HTML+CSS+JS大学生作业作品练习https://download.csdn.net/download/m0_63780299/88805981

作品情况：

一站式旅游服务网

1.景点、酒店、民宿、餐厅等产品

2.加购功能

3.加购列表

4.成交并在加购列表清除

作品部分功能展示：

1.主体内容是用JS数据渲染而非HTML书写

2.点击加购的产品会添加到加购列表，点击成交在加购列表清除产品

3.可点击按价格排序（每个板块奇数次点击价格升序排序，偶数次点击价格降序排序）

部分代码展示：

1.render函数渲染界面，renderPart函数组装每一个板块里的li元素

//render函数，把传入的每个obj对象组装成对应的div代码字符串
function render(obj){
    const {title,className,id,detailData:[...arr]} = obj
    let str = ''
    str += `
        <div class="${className}" id="part${id}">
            <h1>${title}</h1>
            <span>价格排序</span>
            <ul>
    `
    str += renderPart(arr).join('')
    str += `</ul>
        </div>
    `
    return str
}
//renderPart函数，把渲染每个板块的li数据
function renderPart(arr){
    return arr.map(item => {
        const {img,detailTitle,money} = item
        return`<li>
            <img src=${img} alt="">
            <h2>${detailTitle}</h2>
            <p>￥${money}元/人</p>
            <button>加购</button>
        </li>`
    })
}

2.把data数据通过render()渲染到页面上，因为购物列表模块是不同商品，适合按加入购物列表顺序排序，因此去掉购物列表模块绑定排序功能的span

let [...allObj] = data
const content = document.querySelector('.content')
content.innerHTML = allObj.map(item=>render(item)).join('')
content.querySelectorAll('span')[4].remove()

3.加购和排序功能的JS代码，这里用事件委托方式来绑定

//加购功能、排序功能
content.addEventListener('click',e=>{
    //加购功能
    if(e.target.tagName==='BUTTON'){
        const addBuyUl = document.querySelector('.addBuy ul')
        if(e.target.parentNode.parentNode === addBuyUl){
            addBuyUl.removeChild(e.target.parentNode)
        }else{
            const cloneLi = JSON.parse(JSON.stringify(e.target.parentNode.outerHTML))
            addBuyUl.innerHTML += cloneLi.replace('加购','成交')
        }
    }
    //排序功能
    if(e.target.tagName==='SPAN'){
        if(e.target.innerHTML==='价格排序'){
            e.target.innerHTML = '价格升序排序'
            const myData = data[e.target.parentNode.id[4]-1].detailData
            e.target.nextElementSibling.innerHTML = renderPart(myData.sort((a,b)=>a.money-b.money)).join('')
        }else if(e.target.innerHTML==='价格降序排序'){
            e.target.innerHTML = e.target.innerHTML = '价格升序排序'
            const myData = data[e.target.parentNode.id[4]-1].detailData
            e.target.nextElementSibling.innerHTML = renderPart(myData.reverse()).join('')
        }else{
            e.target.innerHTML = e.target.innerHTML = '价格降序排序'
            const myData = data[e.target.parentNode.id[4]-1].detailData
            e.target.nextElementSibling.innerHTML = renderPart(myData.reverse()).join('')
        }
    }
})