如何使 JavaScript 菜單更具功能性

Question

我想知道哪種方式是使此菜單動態化的最佳實踐。 我不想為每個元素創建一個函數。 我應該將它們推入一個數組然后循環遍歷它們嗎？

    <div id="nav">
        <div id="button1"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
    </div>
    <div id="navHover">
        <div id="hoverButton1"></div>
        <div id="hoverButton2"></div>
        <div id="hoverButton3"></div>
        <div id="hoverButton4"></div>
    </div>


    <script type="text/javascript">

            var buttonOne = document.getElementById('button1');
            var buttonOneHover = document.getElementById('hoverButton1');
            
            buttonOne.addEventListener('mouseover', buttonOneBlock, false);
            buttonOne.addEventListener('mouseout', buttonOneNone, false);
            
            buttonOneHover.addEventListener('mouseover', buttonOneBlock, false);
            buttonOneHover.addEventListener('mouseout', buttonOneNone, false);

        function buttonOneBlock() {
            var buttonOneHover = document.getElementById('hoverButton1');
            buttonOneHover.style.display = 'block';
        }

        function buttonOneNone() {
            var buttonOneHover = document.getElementById('hoverButton1');
            buttonOneHover.style.display = 'none';
        }
    </script>


#nav {
width: 960px;
height: 20px;
background-color: white;
margin: auto;
}
#button1, #button2, #button3, #button4 {
width: 100px;
height: 20px;
background-color: red;
float: left;
margin-left: 10px;
}
#navHover {
width: 960px;
height: 20px;
background-color: white;
margin: auto;
}
#hoverButton1, #hoverButton2, #hoverButton3, #hoverButton4 {
width: 100px;
height: 20px;
background-color: orange;
float: left;
margin-left: 10px;
display: none;
}

Answer 1

這是一個簡單的概括：

function setupButton(i) {
  var button = document.getElementById('button' + i);
  var buttonHover = document.getElementById('hoverButton' + i);

  button.addEventListener('mouseover', buttonBlock, false);
  button.addEventListener('mouseout', buttonNone, false);

  buttonHover.addEventListener('mouseover', buttonBlock, false);
  buttonHover.addEventListener('mouseout', buttonNone, false);

  function buttonBlock() {
    buttonHover.style.display = 'block';
  }

  function buttonNone() {
    buttonHover.style.display = 'none';
  }
}

for (var i = 1; i <= 4; ++i) {
  setupButton(i)
}