如何解决帮我简化此JS代码
| 我是JS的初学者,想知道一种简化此代码的方法。 iframe有7个不同的div,还有7个不同的链接。我已经显示了带有iframe和1个链接的1个div。我不知道从哪里开始。任何帮助将不胜感激。 注意:该代码可以满足我的需要,但是我只需要对其进行简化(HTML中的js代码更少,而js文件中的代码更多)。 .js文件中的JavaScript:function show_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = \"block\";}
}
function hide_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = \"none\";}
}
function refFrame() {
for(var i = 0,e = arguments.length;i < e;i++){
document.getElementById(arguments[i]).src = document.getElementById(arguments[i]).src;
}
}
要修改的Div / iframe:
<div id=\"r1-box\">
<iframe id=\"frame-box1\" class=\"work\" src=\"youtubelink\" width=\"720\" height=\"405\" frameborder=\"0\"></iframe>
</div>
链接执行JS:
<a id=\"r1\" href=\"javascript:refFrame(\'frame-box2\',\'frame-box3\',\'frame-box4\',\'frame-box5\',\'frame-box6\',\'frame-box7\');show_visibility(\'r1-box\');hide_visibility(\'r2-box\',\'r3-box\',\'r4-box\',\'r5-box\',\'r6-box\',\'r7-box\');\">
</a>
解决方法
作为初学者,在不了解Java脚本之前,您不应该开始使用jQuery。
有几种方法可以简化此操作,最直接的方法是将Javascript从链接中删除并放入Javascript文件中,或在页面顶部:
window.onload = function() {
document.getElementById(\'#r1\').onclick = function() {
refFrame(\'frame-box2\',\'frame-box3\',\'frame-box4\',\'frame-box5\',\'frame-box6\',\'frame-box7\');
show_visibility(\'r1-box\');
hide_visibility(\'r2-box\',\'r3-box\',\'r4-box\',\'r5-box\',\'r6-box\',\'r7-box\');
};
// more...
};
window.onload是一个事件,一旦页面(您猜对了)完成加载,就会触发该事件。有更好的方法可以做到这一点,但这几乎是最基本的。我建议您看看javascript domready吗?
在看完您的代码后,我意识到您所有的七个链接基本上都将做同样的事情。您可以使用单个函数简单地做到这一点:
function refClick(id) {
var i = 7,frames = [],boxes = [];
while(i--) {
if(i != id) {
frames.push(\'frame-box\' + i);
boxes.push(\'r\' + i + \'-box\');
}
}
refFrame.apply(null,frames);
hide_visibility.apply(null,boxes);
show_visibility(\'r\' + id + \'-box\');
}
我在这里做的是循环7次,并为refFrame和hide_visibility函数构建参数数组。 id变量告诉循环不要将该id放入数组中。
使用.apply方法,我可以将数组用作参数并正常调用它。
对于每个链接,您可以应用以下功能
document.getElementById(\'#r1\').onclick = function() {
refClick(1);
};
document.getElementById(\'#r2\').onclick = function() {
refClick(2);
};
//.....
, 您可以开始使用jQuery。
http://jquery.com/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。