欢迎大家一起讨论~
<!--     描述    请补全JavaScript代码,根据预设代码中的数组,实现以下功能:        1. 列表只展示数组中的name属性        2. 实现点击"销量升序"按钮,列表内容按照销量升序重新渲染        3. 实现点击"销量降序"按钮,列表内容按照销量降序重新渲染    注意:    1. 必须使用DOM0级标准事件(onclick) --> <!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">    </head>    <body>        <button class='up' onclick="reloadBySales(1)">销量升序</button>        <button class='down' onclick="reloadBySales(-1)">销量降序</button>        <ul></ul>        <script>            var cups = [                { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },                { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }            ]            var ul = document.querySelector('ul');            var upbtn = document.querySelector('.up');            var downbtn = document.querySelector('.down');            // 补全代码            /*val = -1 为降序,val = 1为升序 */            function reloadBySales(val){                var orginArr = Array.from(cups).sort((a,b)=>{                         return a.sales > b.sales ? val : -val                })                console.log(orginArr)                ul.innerHTML=orginArr.map((item)=>{                   return '<li>' + item.name + '</li>'                }).join('')            }        </script>    </body></html>
点赞 0
评论 1
全部评论

相关推荐

点赞 评论 收藏
分享
下北澤大天使:你是我见过最美的牛客女孩😍
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务