帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» js可删减新增的音乐榜功能效果
js可删减新增的音乐榜功能效果
浏览:770次
-
评论:1次
-
发布时间:2022-10-14
Html
Css
Js
音乐榜单
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 += `
${v.title}
${v.collect?'
取消收藏
':'
收藏
'}
删除
`; }); 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
<!doctype html><html><head><meta charset="utf-8"><title>js可删减新增的音乐榜功能效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:实现收藏与取消收藏、选取及取消选取音乐、全选与全部不选、删除音乐及删除指定音乐、添加新音乐等功能。
实现收藏与取消收藏、选取及取消选取音乐、全选与全部不选、删除音乐及删除指定音乐、添加新音乐等功能
文本框input颜色选择器即时渲染效果
纯css3实现圆环loading效果
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv5 码农
qq***18
2022年11月26日
学习下,,很不错
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
770
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值