Как сделать меню JavaScript более функциональным - PullRequest
Новая
       10

Как сделать меню JavaScript более функциональным

0 голосов
/ 27 сентября 2011

Интересно, какой способ лучше всего сделать это меню динамичным? Я не хочу делать функцию для каждого элемента. Должен ли я толкнуть их в массив, а затем цикл бросил их? Все ответы и мысли приветствуются. 

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

1 Ответ

2 голосов
/ 27 сентября 2011

Вот прямое обобщение этого: 

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)
}
...