Question

我需要优化我编写的代码。一旦点击相关按钮，就需要显示/隐藏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';
}
}

Answer 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';
}

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

Answer 2

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

。
的document.getElementById（ '任务'）的style.display = '无'; 。的document.getElementById（ '新闻'）的style.display = '无'; 。的document.getElementById（ '服务器'）的style.display = '无'; 的document.getElementById（ '字段'）的style.display = '无';

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

优化Javascript代码

2 个答案: