js音乐榜功能实现代码

Html

Css

ul {
	margin:0;
	padding:0;
	list-style:none;
}
h2 {
	margin:0;
}
#wrap {
	margin:30px auto;
	width:482px;
	padding:5px;
	position:relative;
	border:1px solid #000;
	background:#eee;
}
.title {
	font:bold 18px/40px "宋体";
	text-align:center;
	border-bottom:1px solid #000;
}
#list {
	padding-left:2px;
}
#list li {
	opacity:0.8;
	font:14px/36px "宋体";
	border-bottom:1px solid #000;
}
#list li:hover {
	opacity:1;
}
#list label input {
	margin:0 20px 0 30px;
}
input[type="chekbox"] {
	width:20px;
	height:20px;
}
.footer {
	font:16px/36px "宋体";
}

{
    let data = [{
        id: 0,
        title: "在你的身边-盛哲",
        checked: true,
        collect: true
    }, {
        id: 1,
        title: "后来的你在哪-树泽",
        checked: false,
        collect: false
    }, {
        id: 2,
        title: "等不来花开-pro",
        checked: false,
        collect: true
    }, {
        id: 3,
        title: "满天星辰不及你-ycccc",
        checked: false,
        collect: false
    }, {
        id: 4,
        title: " 堕-Zyboy忠宇",
        checked: true,
        collect: false //是否收藏 true 收藏 false 没有收藏
    }];
    //渲染视图
    let list = document.querySelector("#list");
    let checkAll = document.querySelector("#checkAll");
    let remove = document.querySelector("#remove");
    let add = document.querySelector("#add");
    let newInfo = document.querySelector("#newInfo");
    /* let isCheckedAll=()=>{
        let checked=data.filter(item=>item.checked);
        return checked.length===data.length;
    }; */
    //every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
    //当data.length===0，代表没有元素，然而.every()方法返回true,故需要判断data.length是否为0；
    let isCheckedAll = () => data.length === 0 ? false : data.every(item => item.checked);
    let render = (data) => {
        var str = "";
        data.forEach((v) => {
            str += `
               <li>
                  <input type="checkbox" ${v.checked?'checked':''}/>
                  <span>${v.title}</span>
                  ${v.collect?'<a href="javascript:;" class="cancelCollect">取消收藏</a>':'<a href="javascript:;" class="collect">收藏</a>'}
                  <a href="javascript:;" class="remove">删除</a>
               </li>`;
        });
        list.innerHTML = str;
        addEvent();
        //是否能够达到全选  
        checkAll.checked = isCheckedAll();
    }
    let addEvent = () => {
        let lis = document.querySelectorAll("li");
        lis.forEach((li, index) => {
            let checked = li.querySelector("input");
            let collect = li.querySelector(".collect");
            let cancelCollect = li.querySelector(".cancelCollect")
            let removechild = li.querySelector(".remove");
            checked.onchange = function() {
                data[index].checked = this.checked;
                render(data);
            };
            //收藏
            collect && (collect.onclick = function() {
                data[index].collect = true;
                render(data);
            });
            //取消收藏
            cancelCollect && (cancelCollect.onclick = function() {
                data[index].collect = false;
                render(data);
            });
            //删除元素
            removechild.onclick = function() {
                console.log(index);
                data.splice(index, 1)
                render(data);
            };
            //添加元素
            add.onclick = function() {
                data.push({
                    id: data.length,
                    title: newInfo.value,
                    checked: false,
                    collect: false
                });
                render(data);
            };
            //删除指定元素
            remove.onclick = function() {
                data = data.filter(v => v.checked === false);
                render(data);
            };
            //点击全选的操作，要么全部选中，要么全部取消选中
            checkAll.onchange = function() {
                data.forEach(v => {
                    v.checked = this.checked;
                });
                render(data);
            };
        })
    }
    render(data);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js音乐榜功能实现代码



代码描述：实现收藏与取消收藏、选取及取消选取音乐、全选与全部不选、删除音乐及删除指定音乐、添加新音乐等功能

更新时间：2022-08-28 13:02:30
实现收藏与取消收藏、选取及取消选取音乐、全选与全部不选、删除音乐及删除指定音乐、添加新音乐等功能

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

流年―忆影

相关代码

音乐榜单

js音乐榜功能实现代码

最新