帮我简化此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/