[英]How to make a JavaScript menu more functional
I wonder simply which way is the best practice to make this menu dynamic.我想知道哪种方式是使此菜单动态化的最佳实践。 I don't want to make a function for each Element.
我不想为每个元素创建一个函数。 Should I push them into an Array then loop through them?
我应该将它们推入一个数组然后循环遍历它们吗?
<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;
}
Here's a straightforward generalization of that:这是一个简单的概括:
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)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.