Можно упростить?

[Softlink]

Привет, други.

Вот есть такой скрипт у меня:

function Audio(){
        document.getElementById("GreyDiv").style.display="block";   
        document.getElementById("PhoneUsFrame").style.display="block"; 
		document.getElementById("Audio").style.display="block"; 

}

function Image(){
        document.getElementById("GreyDiv").style.display="block";   
        document.getElementById("PhoneUsFrame").style.display="block"; 
		document.getElementById("Image").style.display="block"; 

}

function Video(){
        document.getElementById("GreyDiv").style.display="block";   
        document.getElementById("PhoneUsFrame").style.display="block"; 
		document.getElementById("Video").style.display="block"; 

}

document.onkeypress = function (event)
{
if (event.keyCode == 27) {
document.getElementById("GreyDiv").style.display="none";
document.getElementById("PhoneUsFrame").style.display="none";
document.getElementById("Image").style.display="none"; 
document.getElementById("Audio").style.display="none";
document.getElementById("Video").style.display="none"; 

}
}


function ClosePhoneUsFrame(){
document.getElementById("GreyDiv").style.display="none";
document.getElementById("PhoneUsFrame").style.display="none";
document.getElementById("Image").style.display="none"; 
document.getElementById("Audio").style.display="none"; 
document.getElementById("Video").style.display="none"; 

}  

function init(){

        document.getElementById("GreyDiv").onclick=function(){
            document.getElementById("GreyDiv").style.display="none";
            document.getElementById("PhoneUsFrame").style.display="none";
    }}	

Он делает всплывающее окно.

Вот так это выглядит в html-разметке:

<div id="GreyDiv"  onclick="ClosePhoneUsFrame();"></div> 
<div id='PhoneUsFrame'>
    <div id="closeform" onclick="ClosePhoneUsFrame()" ></div>

	<div id="Audio">
		текст какой-нибудь
	</div>
</div>
——————————————--
<a href="#" class="audio-icon" onclick="Audio();">Аудио</a>

Стили писать не буду, там все просто. Скажу лишь, что id="GreyDiv" делает затемнение окна с помощью opacity.

Вот в чем вопрос. Можно ли упростить как-то этот скрипт? Вот в нем, насколько я понимаю, вверху идет перечисление элементов, которые будут вызываться. А можно ли как-то их объединить в одно целое? Что-то вроде:

function XXXXXX(){
        document.getElementById("GreyDiv").style.display="block";   
        document.getElementById("PhoneUsFrame").style.display="block"; 
		document.getElementById("Image","Audio" ...).style.display="block"; 

как внизу в общем. Я попробовал потыкать, но у меня ничего не вышло.

И еще один вопрос. Можно ли <div id="GreyDiv" onclick="ClosePhoneUsFrame();"></div> как-то выбросить из разметки и засунуть в скрипт. А то он просто так болтается в коде.

Может это все и просто делается, но я не разбираюсь в JS, а изучить подобное не позволяет срок реализации.

С другой стороны вроде все работает, но у меня включился какой-то перфекционизм, что надо сделать лучше. И еще если будет много разных ссылок, то скрипт будет очень большим, а это уже не очень хорошо.

upd Может у кого-нибудь есть подобные скрипты в арсенале, рассмотрю варианты. Поиски по интернетам увенчались результатом на jQuery, а как-то неохота подключать библиотеку из-за этих окошек. Тем более, что красивостей мне никаких не надо: открыть-затемнить-закрыть, вот весь функционал.

Edited August 8, 2011 by Softlink

[psywalker]

Ну как вариант, можно например в функцию просто передавать айдишники дивов, которых нужно показать или скрыть, а уже в функции можно циклом по ним проходиться и вырубать или врубать.

[Softlink]

Ну как вариант, можно например в функцию просто передавать айдишники дивов, которых нужно показать или скрыть, а уже в функции можно циклом по ним проходиться и вырубать или врубать.

Спасибо, Макс, но до такого мне не додуматься. Как начну учить JS, так вернусь к этому вопросу. Пусть остается как есть тогда. Я думал, что это как-то просто решается.

[psywalker]

Ну как вариант, можно например в функцию просто передавать айдишники дивов, которых нужно показать или скрыть, а уже в функции можно циклом по ним проходиться и вырубать или врубать.

Спасибо, Макс, но до такого мне не додуматься. Как начну учить JS, так вернусь к этому вопросу. Пусть остается как есть тогда. Я думал, что это как-то просто решается.

Не за что, дружище. А вообще то, что я тебе сказал, это как раз и есть Просто, т.е. это в принципе самые азы JS. Тупо функции, да циклы. Когда начнёшь изучать эту технологию, сам ахренеешь, насколько это просто

[stars]

Макс прав проще не куда...

function GetContent(str){
        document.getElementById("GreyDiv").style.display="block";   
        document.getElementById("PhoneUsFrame").style.display="block"; 
                document.getElementById(str).style.display="block"; 
}

этот кусок заменит верхние 3 функции, по сути вместо Audio() достаточно вызвать GetContent('Audio') c Image() и Video() аналогично, но азы лучше изучить дело на пару часов ей богу...

[Softlink]

stars, спасибо! Все работает.

А по поводу азов, не могу сказать, что это хорошо. Надо сначала одно дело познать нормально, а не браться за несколько сразу.

И выхватывать кусками материал я не очень люблю. Лучше уж основательно вникать.

[psywalker]

stars, спасибо! Все работает.

А по поводу азов, не могу сказать, что это хорошо. Надо сначала одно дело познать нормально, а не браться за несколько сразу.

И выхватывать кусками материал я не очень люблю. Лучше уж основательно вникать.

Да, это верный подход. Всё основательно и последовательно.

[ruslan.savenok]

Кошмар, вы бы написали 2 метода show/hide которые параметрами принимают сколь нужно айдишников