0

我需要优化我编写的代码。单击相关按钮后，有 04 个不同的 DIV ID 需要显示/隐藏。请帮我优化这个 Javascript 代码：

function missionShowHide()
{
var mis_element = document.getElementById('mission');
var news_element = document.getElementById('news');
var serv_element = document.getElementById('server');
var field_element = document.getElementById('field');

var mis = mis_element.style;

if(mis.display == 'none') {mis.display = 'block';
    news_element.style.display='none';
    serv_element.style.display='none';
    field_element.style.display='none';
}
else 
{
    mis.display = 'block';
    news_element.style.display='none';
    serv_element.style.display='none';
    field_element.style.display='none';
}
}

function newsShowHide()
{
var mis_element = document.getElementById('mission');
var news_element = document.getElementById('news');
var serv_element = document.getElementById('server');
var field_element = document.getElementById('field');

var news = news_element.style;

if(news.display == 'none') {news.display = 'block';
    mis_element.style.display='none';
    serv_element.style.display='none';
    field_element.style.display='none';
}
else 
{
    news.display = 'block';
    mis_element.style.display='none';
    serv_element.style.display='none';
    field_element.style.display='none';
}
}
4

2 回答 2

1 
function showHide(targetId)
{
    document.getElementById('mission').style.display='none';
    document.getElementById('news').style.display='none';
    document.getElementById('server').style.display='none';
    document.getElementById('field').style.display='none';

    document.getElementById(targetId).style.display='block';
}

您还可以缓存元素并使用决策构造来选择要显示的目标元素。

于 2013-05-23T11:32:06.950 回答
1

如果您对页面上的多个元素进行相同的操作：

document.getElementById('mission').style.display='none'; document.getElementById('news').style.display='none'; document.getElementById('server').style.display='none'; document.getElementById('field').style.display='none';

最好为它们添加一个特定的附加类，并使用document.getElementsByClassNamejQuery 选择器$(".class")来获取该类的所有元素。结果，您将获得元素数组，并将操作该数组中所有项目的属性，而不是为每个元素复制代码。

于 2013-05-23T11:41:10.633 回答