Показать сообщение отдельно
  #1 (permalink)  
Старый 21.12.2013, 21:08
Профессор
Отправить личное сообщение для Batyabest Посмотреть профиль Найти все сообщения от Batyabest
 
Регистрация: 14.09.2013
Сообщений: 252

Как объединить 4 одинаковых функции
Здравствуйте.
Так как знаний у меня мало, то я сделал скрипт отображения блока по клику. А таких блоков надо 4. Я сделал 4 скрипта одинаковых по смыслу.
Чувствую, пахнет школотой.
Помогите сделать 1 скрипт из 4.
function hide_show1()
{
    //Получаем стиль блока с айди div (для изменения)
    var div=document.getElementById("sberbank").style.display;
    //Получаем стиль ссылки (для изменения)
    var link1=document.getElementById("link1").innerHTML;
 
    //Изначально стиль display у блока равен ""
    //так как он изначально отображается
    //задаем ему стиль block
    if(div=="")div="none";
 
    //Если блок не отображается
    if(div=="none")
    {
        div="block";
        link1="Скрыть номер карты и срок действия";
    }
    //или наоборот
    else
    {
        div="none";
        link1="Показать номер карты и срок действия";
    }
    //Теперь меняем стили у ссылки
    //и блока который хотим скрыть или показать
    document.getElementById("sberbank").style.display=div;
    document.getElementById("link1").innerHTML=link1;
}

	function hide_show2()
{
    //Получаем стиль блока с айди div (для изменения)
    var div=document.getElementById("uralsib").style.display;
    //Получаем стиль ссылки (для изменения)
    var link2=document.getElementById("link2").innerHTML;
 
    //Изначально стиль display у блока равен ""
    //так как он изначально отображается
    //задаем ему стиль block
    if(div=="")div="none";
 
    //Если блок не отображается
    if(div=="none")
    {
        div="block";
        link2="Скрыть номер карты и срок действия";
    }
    //или наоборот
    else
    {
        div="none";
        link2="Показать номер карты и срок действия";
    }
    //Теперь меняем стили у ссылки
    //и блока который хотим скрыть или показать
    document.getElementById("uralsib").style.display=div;
    document.getElementById("link2").innerHTML=link2;
}

	function hide_show3()
{
    //Получаем стиль блока с айди div (для изменения)
    var div=document.getElementById("svyaznoy").style.display;
    //Получаем стиль ссылки (для изменения)
    var link3=document.getElementById("link3").innerHTML;
 
    //Изначально стиль display у блока равен ""
    //так как он изначально отображается
    //задаем ему стиль block
    if(div=="")div="none";
 
    //Если блок не отображается
    if(div=="none")
    {
        div="block";
        link3="Скрыть номер карты и срок действия";
    }
    //или наоборот
    else
    {
        div="none";
        link3="Показать номер карты и срок действия";
    }
    //Теперь меняем стили у ссылки
    //и блока который хотим скрыть или показать
    document.getElementById("svyaznoy").style.display=div;
    document.getElementById("link3").innerHTML=link3;
}

	function hide_show4()
{
    //Получаем стиль блока с айди div (для изменения)
    var div=document.getElementById("privat").style.display;
    //Получаем стиль ссылки (для изменения)
    var link4=document.getElementById("link4").innerHTML;
 
    //Изначально стиль display у блока равен ""
    //так как он изначально отображается
    //задаем ему стиль block
    if(div=="")div="none";
 
    //Если блок не отображается
    if(div=="none")
    {
        div="block";
        link4="Скрыть номер карты и срок действия";
    }
    //или наоборот
    else
    {
        div="none";
        link4="Показать номер карты и срок действия";
    }
    //Теперь меняем стили у ссылки
    //и блока который хотим скрыть или показать
    document.getElementById("privat").style.display=div;
    document.getElementById("link4").innerHTML=link4;
}

<style>
#sberbank
{
    display:none
}
#link1
{
    cursor:pointer;
}
#link1:hover
{
    color:red;
    font-weight:bold;
}
#uralsib
{
    display:none
}
#link2
{
    cursor:pointer;
}
#link2:hover
{
    color:red;
    font-weight:bold;
}
#svyaznoy
{
    display:none
}
#link3
{
    cursor:pointer;
}
#link3:hover
{
    color:red;
    font-weight:bold;
}
#privat
{
    display:none
}
#link4
{
    cursor:pointer;
}
#link4:hover
{
    color:red;
    font-weight:bold;
}
</style>

<p><b>Сбербанка России</b></p>
<a onClick="hide_show1();return false;" id="link1">Показать номер карты и срок действия</a>
<div id="sberbank">
<p>хххх-хххх-хххх-хххх</p>
<p>01/01</p>
</div>
<p><b>УралСибБанк</b></p>
<a onClick="hide_show2();return false;" id="link2">Показать номер карты и срок действия</a>
<div id="uralsib">
<p>хххх-хххх-хххх-хххх</p>
<p>01/01</p>
</div>
<p><b>СвязнойБанк</b></p>
<a onClick="hide_show3();return false;" id="link3">Показать номер карты и срок действия</a>
<div id="svyaznoy">
<p>хххх-хххх-хххх-хххх</p>
<p>01/01</p>
</div>
<p><b>ПриватБанк</b></p>
<a onClick="hide_show4();return false;" id="link4">Показать номер карты и срок действия</a>
<div id="privat">
<p>хххх-хххх-хххх-хххх</p>
<p>01/01</p>
Ответить с цитированием