Question

我是JS的初学者，想要了解一种简化此代码的方法。有7个不同的div与iframe，还有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>

Answer 1

作为初学者，在了解更多Javascript之前，不应该开始使用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);
};
//.....

Answer 2

你可以开始使用jQuery了。

http://jquery.com/

帮我简化这个JS代码

2 个答案: