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.getElementsByClassNameそれらすべてに特定の追加クラスを追加し、または jQuery セレクターを使用$(".class")して、このクラスのすべての要素を取得する方がよい場合があります。その結果、要素の配列を取得し、すべての要素のコードを複製する代わりに、その配列内のすべての項目のプロパティを操作します。

于 2013-05-23T11:41:10.633 に答える