数据
[{，}]
(.box)(){{[0]value[1]，id:value[1]，} } Constnawrr[](FunctionInitHTML(){ New Arr)。foreach((item，index){ varolistDocument。CreateElement(div)Olist。类名列表。SetAttribute(数据列表，索引)Olist。InnerHTML DivClasslabel $ { item。标签}/div
divclassright
divclasstopdata-btn${index}向上/div
divclassbottomdata-btn${index}向下/div
/div
obox。appendchild(Olist)})} FuncTion ClickBtn(){ varobntopddocument。查询selectorall(.top)varobtenbottomdocument。查询selectorall(.bottom)for(leti 0；ioBtnTop.lengthi){//向上我.添加事件侦听器(单击，函数(){ VarDataBanvalueObntop[I]).getAttribute(data-BTN)if(Number(data TN值)0){ Varnewitemsnewarr[data TN值]//NewArr[data TN值-1]//NewArr[data TN值-1]NewItemNewArr。拼接(Databtn值-1，1，newArr.splice(dataBtnValue，1，Newarr[DataBtnvalue-1])；obox。innerhtml inithtml()} else { obox。innerhtml inithtml()警报(已经到顶了)}点击Btn()})//向下oBtnBottom[i].添加事件侦听器(单击，函数(){ VarDataBanvalueBottom[I]).getAttribute(数据-BTN)if(Number(数据值)obtnbottom。length-1){ VarnewitemsNewarr[data TN value]new RR[Number(data TN value)1]//new RR[Number(data TN value)1]new items//obox。innerhtmlinithtml()} else { obox。innerhtmlinithtml()警报(已经到底了)}点击Btn()})} }窗口。onload函数(){ for(leti 0；ii){ NewArr。push(structure(label，I))} in TMl()click Btn()}
HTML
divclassbox/div
风格
* { margin:0padding:0 } .方框{ margin :20 pxpadding :20 pxborder :1 pxsolidred } .list {/* line-height :48 px；*/border-bottom :1 pxsolid # eee；display : flex justice-content : space-before；对齐-项目：居中；} .标签{行高：48 px} .右{ display : flex justice-content : space-before；对齐-项目：居中；} .顶部{ margin-right :10 px；颜色：红色} .底部{ color:green} .顶部，底部{ padd :4 px 16 px背景技术： # AAA边界半径：5 px}。顶部：悬停{光标：指针；背景# 2525b9}。底部：悬停{光标：指针；背景# 2525b9{}
相关阅读
版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除
标签： #纯手工js事件切换热门博客列表