如何實(shí)現(xiàn)點(diǎn)擊頁(yè)面中的一個(gè)按鈕相應(yīng)位置的div顯示隱藏？

這個(gè)可以通過(guò)給按鈕點(diǎn)擊事件傳參來(lái)完成，下面是一個(gè)小例子
html

<div id="wrap">
    <button>點(diǎn)擊1</button>
    <div class="one">1</div>
    <button>點(diǎn)擊2</button>
    <div class="one">2</div>
    <button>點(diǎn)擊3</button>
    <div class="one">3</div>
    <button>點(diǎn)擊4</button>
    <div class="one">4</div>
    <button>點(diǎn)擊5</button>
    <div class="one">5</div>
</div>

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<num; 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;
      }
    })
  }

--------------------補(bǔ)充：---------------
js中用opacity是為了不讓隱藏的div破壞頁(yè)面結(jié)構(gòu)，如果用display的話，容易影響頁(yè)面的結(jié)構(gòu)。當(dāng)然這視情況而定。
if語(yǔ)句判斷是否為''是因?yàn)樵谝婚_始，opacity=''，如果不加，一開始要點(diǎn)擊兩次，div才會(huì)隱藏。
--------------------補(bǔ)充：---------------
修改了一下js和html。每次對(duì)div和button的刪除和增加，只要是成對(duì)的，那就都可以了。