Как объединить 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> |
Batyabest,
<style> a.link:hover{color:red;font-weight:bold;} div.bank{display:none;} </style> <script> function hide_show(i) { var div = document.getElementById('bank' + i); var link = document.getElementById('link' + i); if (div.style.display == 'block') { div.style.display = 'none'; link.innerHTML = 'Показать номер карты и срок действия'; } else { div.style.display = 'block'; link.innerHTML = 'Скрыть номер карты и срок действия'; } } </script> <p><b>Сбербанка России</b></p> <a href="javascript:hide_show(1)" id="link1" class="link">Показать номер карты и срок действия</a> <div id="bank1" class="bank"><p>хххх-хххх-хххх-хххх</p><p>01/01</p></div> <p><b>УралСибБанк</b></p> <a href="javascript:hide_show(2)" id="link2" class="link">Показать номер карты и срок действия</a> <div id="bank2" class="bank"><p>хххх-хххх-хххх-хххх</p><p>01/01</p></div> <p><b>СвязнойБанк</b></p> <a href="javascript:hide_show(3)" id="link3" class="link">Показать номер карты и срок действия</a> <div id="bank3" class="bank"><p>хххх-хххх-хххх-хххх</p><p>01/01</p></div> <p><b>ПриватБанк</b></p> <a href="javascript:hide_show(4)" id="link4" class="link">Показать номер карты и срок действия</a> <div id="bank4" class="bank"><p>хххх-хххх-хххх-хххх</p><p>01/01</p></div> |
Rise,
Спасибо, то что нужно!!! |
Часовой пояс GMT +3, время: 03:31. |