这个可以通过给按钮点击事件传参来完成,下面是一个小例子
html
点击1
点击2
点击3
点击4
点击5
css
.one{
width: 100px;
height: 20px;
background-color: red;
}
js
var wrap = document.getElementById('wrap');
console.log(wrap);
var oButton = wrap.getElementsByTagName('button');
var num = oButton.length;
for(let i=0; i
// oButton[i].setAttribute('onclick' ,`change(${i},this)`);
oButton[i].addEventListener('click',function(){
var oDiv = document.getElementsByClassName('one')
if (oDiv[i].style.opacity == 1 || (oDiv[i].style.opacity == '')) {
oDiv[i].style.opacity = 0;
} else {
oDiv[i].style.opacity = 1;
}
})
}
--------------------补充:---------------
js中用opacity是为了不让隐藏的div破坏页面结构,如果用display的话,容易影响页面的结构。当然这视情况而定。
if语句判断是否为''是因为在一开始,opacity='',如果不加,一开始要点击两次,div才会隐藏。
--------------------补充:---------------
修改了一下js和html。每次对div和button的删除和增加,只要是成对的,那就都可以了。