2015-01-28 3 views
1

Первого этоЕсть ли способ, чтобы сделать этот код короче

function show1(){ 
    document.getElementById("pic-1").style.visibility = "visible"; 
    document.getElementById("pic-2").style.visibility = "hidden"; 
    document.getElementById("pic-3").style.visibility = "hidden"; 
    document.getElementById("pic-4").style.visibility = "hidden"; 
    document.getElementById("pic-5").style.visibility = "hidden"; 
    } 

меня как 50 из тех, кто ...

Есть ли способ сгруппировать пучок из них в массиве или что нибудь? И просто, чтобы вы знаете, я совсем новичок во всем этом, так что, когда вы видите это как катастрофу

/* Slide 1 */ 
    function show1(){ 
    document.getElementById("pic-1").style.visibility = "visible"; 
    document.getElementById("pic-2").style.visibility = "hidden"; 
    document.getElementById("pic-3").style.visibility = "hidden"; 
    document.getElementById("pic-4").style.visibility = "hidden"; 
    document.getElementById("pic-5").style.visibility = "hidden"; 
    } 
    function show2(){ 
    document.getElementById("pic-2").style.visibility = "visible"; 
    document.getElementById("pic-1").style.visibility = "hidden"; 
    document.getElementById("pic-3").style.visibility = "hidden"; 
    document.getElementById("pic-4").style.visibility = "hidden"; 
    document.getElementById("pic-5").style.visibility = "hidden"; 
    } 
    function show3(){ 
    document.getElementById("pic-3").style.visibility = "visible"; 
    document.getElementById("pic-2").style.visibility = "hidden"; 
    document.getElementById("pic-1").style.visibility = "hidden"; 
    document.getElementById("pic-4").style.visibility = "hidden"; 
    document.getElementById("pic-5").style.visibility = "hidden"; 
    } 
    function show4(){ 
    document.getElementById("pic-4").style.visibility = "visible"; 
    document.getElementById("pic-2").style.visibility = "hidden"; 
    document.getElementById("pic-3").style.visibility = "hidden"; 
    document.getElementById("pic-1").style.visibility = "hidden"; 
    document.getElementById("pic-5").style.visibility = "hidden"; 
    } 
    function show5(){ 
    document.getElementById("pic-5").style.visibility = "visible"; 
    document.getElementById("pic-2").style.visibility = "hidden"; 
    document.getElementById("pic-3").style.visibility = "hidden"; 
    document.getElementById("pic-4").style.visibility = "hidden"; 
    document.getElementById("pic-1").style.visibility = "hidden"; 
    } 
    /* Slide 2 */ 
    function show21(){ 
    document.getElementById("pic-21").style.visibility = "visible"; 
    document.getElementById("pic-22").style.visibility = "hidden"; 
    document.getElementById("pic-23").style.visibility = "hidden"; 
    document.getElementById("pic-24").style.visibility = "hidden"; 
    document.getElementById("pic-25").style.visibility = "hidden"; 
    } 
    function show22(){ 
    document.getElementById("pic-22").style.visibility = "visible"; 
    document.getElementById("pic-21").style.visibility = "hidden"; 
    document.getElementById("pic-23").style.visibility = "hidden"; 
    document.getElementById("pic-24").style.visibility = "hidden"; 
    document.getElementById("pic-25").style.visibility = "hidden"; 
    } 
    function show23(){ 
    document.getElementById("pic-23").style.visibility = "visible"; 
    document.getElementById("pic-22").style.visibility = "hidden"; 
    document.getElementById("pic-21").style.visibility = "hidden"; 
    document.getElementById("pic-24").style.visibility = "hidden"; 
    document.getElementById("pic-25").style.visibility = "hidden"; 
    } 
    function show24(){ 
    document.getElementById("pic-24").style.visibility = "visible"; 
    document.getElementById("pic-22").style.visibility = "hidden"; 
    document.getElementById("pic-23").style.visibility = "hidden"; 
    document.getElementById("pic-21").style.visibility = "hidden"; 
    document.getElementById("pic-25").style.visibility = "hidden"; 
    } 
    function show25(){ 
    document.getElementById("pic-25").style.visibility = "visible"; 
    document.getElementById("pic-22").style.visibility = "hidden"; 
    document.getElementById("pic-23").style.visibility = "hidden"; 
    document.getElementById("pic-24").style.visibility = "hidden"; 
    document.getElementById("pic-21").style.visibility = "hidden"; 
    } 
    /* Slide 3 */ 
    function show31(){ 
    document.getElementById("pic-31").style.visibility = "visible"; 
    document.getElementById("pic-32").style.visibility = "hidden"; 
    document.getElementById("pic-33").style.visibility = "hidden"; 
    document.getElementById("pic-34").style.visibility = "hidden"; 
    document.getElementById("pic-35").style.visibility = "hidden"; 
    } 
    function show32(){ 
    document.getElementById("pic-32").style.visibility = "visible"; 
    document.getElementById("pic-31").style.visibility = "hidden"; 
    document.getElementById("pic-33").style.visibility = "hidden"; 
    document.getElementById("pic-34").style.visibility = "hidden"; 
    document.getElementById("pic-35").style.visibility = "hidden"; 
    } 
    function show33(){ 
    document.getElementById("pic-33").style.visibility = "visible"; 
    document.getElementById("pic-32").style.visibility = "hidden"; 
    document.getElementById("pic-31").style.visibility = "hidden"; 
    document.getElementById("pic-34").style.visibility = "hidden"; 
    document.getElementById("pic-35").style.visibility = "hidden"; 
    } 
    function show34(){ 
    document.getElementById("pic-34").style.visibility = "visible"; 
    document.getElementById("pic-32").style.visibility = "hidden"; 
    document.getElementById("pic-33").style.visibility = "hidden"; 
    document.getElementById("pic-31").style.visibility = "hidden"; 
    document.getElementById("pic-35").style.visibility = "hidden"; 
    } 
    function show35(){ 
    document.getElementById("pic-35").style.visibility = "visible"; 
    document.getElementById("pic-32").style.visibility = "hidden"; 
    document.getElementById("pic-33").style.visibility = "hidden"; 
    document.getElementById("pic-34").style.visibility = "hidden"; 
    document.getElementById("pic-31").style.visibility = "hidden"; 
    } 
    /* Slide 4 */ 
    function show41(){ 
    document.getElementById("pic-41").style.visibility = "visible"; 
    document.getElementById("pic-42").style.visibility = "hidden"; 
    document.getElementById("pic-43").style.visibility = "hidden"; 
    document.getElementById("pic-44").style.visibility = "hidden"; 
    document.getElementById("pic-45").style.visibility = "hidden"; 
    } 
    function show42(){ 
    document.getElementById("pic-42").style.visibility = "visible"; 
    document.getElementById("pic-41").style.visibility = "hidden"; 
    document.getElementById("pic-43").style.visibility = "hidden"; 
    document.getElementById("pic-44").style.visibility = "hidden"; 
    document.getElementById("pic-45").style.visibility = "hidden"; 
    } 
    function show43(){ 
    document.getElementById("pic-43").style.visibility = "visible"; 
    document.getElementById("pic-42").style.visibility = "hidden"; 
    document.getElementById("pic-41").style.visibility = "hidden"; 
    document.getElementById("pic-44").style.visibility = "hidden"; 
    document.getElementById("pic-45").style.visibility = "hidden"; 
    } 
    function show44(){ 
    document.getElementById("pic-44").style.visibility = "visible"; 
    document.getElementById("pic-42").style.visibility = "hidden"; 
    document.getElementById("pic-43").style.visibility = "hidden"; 
    document.getElementById("pic-41").style.visibility = "hidden"; 
    document.getElementById("pic-45").style.visibility = "hidden"; 
    } 
    function show45(){ 
    document.getElementById("pic-45").style.visibility = "visible"; 
    document.getElementById("pic-42").style.visibility = "hidden"; 
    document.getElementById("pic-43").style.visibility = "hidden"; 
    document.getElementById("pic-44").style.visibility = "hidden"; 
    document.getElementById("pic-41").style.visibility = "hidden"; 
    } 
    /* Slide 5 */ 
    function show51(){ 
    document.getElementById("pic-51").style.visibility = "visible"; 
    document.getElementById("pic-52").style.visibility = "hidden"; 
    document.getElementById("pic-53").style.visibility = "hidden"; 
    document.getElementById("pic-54").style.visibility = "hidden"; 
    document.getElementById("pic-55").style.visibility = "hidden"; 
    } 
    function show52(){ 
    document.getElementById("pic-52").style.visibility = "visible"; 
    document.getElementById("pic-51").style.visibility = "hidden"; 
    document.getElementById("pic-53").style.visibility = "hidden"; 
    document.getElementById("pic-54").style.visibility = "hidden"; 
    document.getElementById("pic-55").style.visibility = "hidden"; 
    } 
    function show53(){ 
    document.getElementById("pic-53").style.visibility = "visible"; 
    document.getElementById("pic-52").style.visibility = "hidden"; 
    document.getElementById("pic-51").style.visibility = "hidden"; 
    document.getElementById("pic-54").style.visibility = "hidden"; 
    document.getElementById("pic-55").style.visibility = "hidden"; 
    } 
    function show54(){ 
    document.getElementById("pic-54").style.visibility = "visible"; 
    document.getElementById("pic-52").style.visibility = "hidden"; 
    document.getElementById("pic-53").style.visibility = "hidden"; 
    document.getElementById("pic-51").style.visibility = "hidden"; 
    document.getElementById("pic-55").style.visibility = "hidden"; 
    } 
    function show55(){ 
    document.getElementById("pic-55").style.visibility = "visible"; 
    document.getElementById("pic-52").style.visibility = "hidden"; 
    document.getElementById("pic-53").style.visibility = "hidden"; 
    document.getElementById("pic-54").style.visibility = "hidden"; 
    document.getElementById("pic-51").style.visibility = "hidden"; 
    } 
    /* Slide 6 */ 
    function show1(){ 
    document.getElementById("pic-61").style.visibility = "visible"; 
    document.getElementById("pic-62").style.visibility = "hidden"; 
    document.getElementById("pic-63").style.visibility = "hidden"; 
    document.getElementById("pic-64").style.visibility = "hidden"; 
    document.getElementById("pic-65").style.visibility = "hidden"; 
    } 
    function show62(){ 
    document.getElementById("pic-62").style.visibility = "visible"; 
    document.getElementById("pic-61").style.visibility = "hidden"; 
    document.getElementById("pic-63").style.visibility = "hidden"; 
    document.getElementById("pic-64").style.visibility = "hidden"; 
    document.getElementById("pic-65").style.visibility = "hidden"; 
    } 
    function show63(){ 
    document.getElementById("pic-63").style.visibility = "visible"; 
    document.getElementById("pic-62").style.visibility = "hidden"; 
    document.getElementById("pic-61").style.visibility = "hidden"; 
    document.getElementById("pic-64").style.visibility = "hidden"; 
    document.getElementById("pic-65").style.visibility = "hidden"; 
    } 
    function show64(){ 
    document.getElementById("pic-64").style.visibility = "visible"; 
    document.getElementById("pic-62").style.visibility = "hidden"; 
    document.getElementById("pic-63").style.visibility = "hidden"; 
    document.getElementById("pic-61").style.visibility = "hidden"; 
    document.getElementById("pic-65").style.visibility = "hidden"; 
    } 
    function show65(){ 
    document.getElementById("pic-65").style.visibility = "visible"; 
    document.getElementById("pic-62").style.visibility = "hidden"; 
    document.getElementById("pic-63").style.visibility = "hidden"; 
    document.getElementById("pic-64").style.visibility = "hidden"; 
    document.getElementById("pic-61").style.visibility = "hidden"; 
    } 
    /* Slide 6 */ 
    function show61(){ 
    document.getElementById("pic-61").style.visibility = "visible"; 
    document.getElementById("pic-62").style.visibility = "hidden"; 
    document.getElementById("pic-63").style.visibility = "hidden"; 
    document.getElementById("pic-64").style.visibility = "hidden"; 
    document.getElementById("pic-65").style.visibility = "hidden"; 
    } 
    function show62(){ 
    document.getElementById("pic-62").style.visibility = "visible"; 
    document.getElementById("pic-61").style.visibility = "hidden"; 
    document.getElementById("pic-63").style.visibility = "hidden"; 
    document.getElementById("pic-64").style.visibility = "hidden"; 
    document.getElementById("pic-65").style.visibility = "hidden"; 
    } 
    function show63(){ 
    document.getElementById("pic-63").style.visibility = "visible"; 
    document.getElementById("pic-62").style.visibility = "hidden"; 
    document.getElementById("pic-61").style.visibility = "hidden"; 
    document.getElementById("pic-64").style.visibility = "hidden"; 
    document.getElementById("pic-65").style.visibility = "hidden"; 
    } 
    function show64(){ 
    document.getElementById("pic-64").style.visibility = "visible"; 
    document.getElementById("pic-62").style.visibility = "hidden"; 
    document.getElementById("pic-63").style.visibility = "hidden"; 
    document.getElementById("pic-61").style.visibility = "hidden"; 
    document.getElementById("pic-65").style.visibility = "hidden"; 
    } 
    function show65(){ 
    document.getElementById("pic-65").style.visibility = "visible"; 
    document.getElementById("pic-62").style.visibility = "hidden"; 
    document.getElementById("pic-63").style.visibility = "hidden"; 
    document.getElementById("pic-64").style.visibility = "hidden"; 
    document.getElementById("pic-61").style.visibility = "hidden"; 
    } 
    /* Slide 7 */ 
    function show71(){ 
    document.getElementById("pic-71").style.visibility = "visible"; 
    document.getElementById("pic-72").style.visibility = "hidden"; 
    document.getElementById("pic-73").style.visibility = "hidden"; 
    document.getElementById("pic-74").style.visibility = "hidden"; 
    document.getElementById("pic-75").style.visibility = "hidden"; 
    } 
    function show72(){ 
    document.getElementById("pic-72").style.visibility = "visible"; 
    document.getElementById("pic-71").style.visibility = "hidden"; 
    document.getElementById("pic-73").style.visibility = "hidden"; 
    document.getElementById("pic-74").style.visibility = "hidden"; 
    document.getElementById("pic-75").style.visibility = "hidden"; 
    } 
    function show73(){ 
    document.getElementById("pic-73").style.visibility = "visible"; 
    document.getElementById("pic-72").style.visibility = "hidden"; 
    document.getElementById("pic-71").style.visibility = "hidden"; 
    document.getElementById("pic-74").style.visibility = "hidden"; 
    document.getElementById("pic-75").style.visibility = "hidden"; 
    } 
    function show74(){ 
    document.getElementById("pic-74").style.visibility = "visible"; 
    document.getElementById("pic-72").style.visibility = "hidden"; 
    document.getElementById("pic-73").style.visibility = "hidden"; 
    document.getElementById("pic-71").style.visibility = "hidden"; 
    document.getElementById("pic-75").style.visibility = "hidden"; 
    } 
    function show75(){ 
    document.getElementById("pic-75").style.visibility = "visible"; 
    document.getElementById("pic-72").style.visibility = "hidden"; 
    document.getElementById("pic-73").style.visibility = "hidden"; 
    document.getElementById("pic-74").style.visibility = "hidden"; 
    document.getElementById("pic-71").style.visibility = "hidden"; 
    } 
    /* Slide 8 */ 
    function show81(){ 
    document.getElementById("pic-81").style.visibility = "visible"; 
    document.getElementById("pic-82").style.visibility = "hidden"; 
    document.getElementById("pic-83").style.visibility = "hidden"; 
    document.getElementById("pic-84").style.visibility = "hidden"; 
    document.getElementById("pic-85").style.visibility = "hidden"; 
    } 
    function show82(){ 
    document.getElementById("pic-82").style.visibility = "visible"; 
    document.getElementById("pic-81").style.visibility = "hidden"; 
    document.getElementById("pic-83").style.visibility = "hidden"; 
    document.getElementById("pic-84").style.visibility = "hidden"; 
    document.getElementById("pic-85").style.visibility = "hidden"; 
    } 
    function show83(){ 
    document.getElementById("pic-83").style.visibility = "visible"; 
    document.getElementById("pic-82").style.visibility = "hidden"; 
    document.getElementById("pic-81").style.visibility = "hidden"; 
    document.getElementById("pic-84").style.visibility = "hidden"; 
    document.getElementById("pic-85").style.visibility = "hidden"; 
    } 
    function show84(){ 
    document.getElementById("pic-84").style.visibility = "visible"; 
    document.getElementById("pic-82").style.visibility = "hidden"; 
    document.getElementById("pic-83").style.visibility = "hidden"; 
    document.getElementById("pic-81").style.visibility = "hidden"; 
    document.getElementById("pic-85").style.visibility = "hidden"; 
    } 
    function show85(){ 
    document.getElementById("pic-85").style.visibility = "visible"; 
    document.getElementById("pic-82").style.visibility = "hidden"; 
    document.getElementById("pic-83").style.visibility = "hidden"; 
    document.getElementById("pic-84").style.visibility = "hidden"; 
    document.getElementById("pic-81").style.visibility = "hidden"; 
    } 
    /* Slide 9 */ 
    function show91(){ 
    document.getElementById("pic-91").style.visibility = "visible"; 
    document.getElementById("pic-92").style.visibility = "hidden"; 
    document.getElementById("pic-93").style.visibility = "hidden"; 
    document.getElementById("pic-94").style.visibility = "hidden"; 
    document.getElementById("pic-95").style.visibility = "hidden"; 
    } 
    function show92(){ 
    document.getElementById("pic-92").style.visibility = "visible"; 
    document.getElementById("pic-91").style.visibility = "hidden"; 
    document.getElementById("pic-93").style.visibility = "hidden"; 
    document.getElementById("pic-94").style.visibility = "hidden"; 
    document.getElementById("pic-95").style.visibility = "hidden"; 
    } 
    function show93(){ 
    document.getElementById("pic-93").style.visibility = "visible"; 
    document.getElementById("pic-92").style.visibility = "hidden"; 
    document.getElementById("pic-91").style.visibility = "hidden"; 
    document.getElementById("pic-94").style.visibility = "hidden"; 
    document.getElementById("pic-95").style.visibility = "hidden"; 
    } 
    function show94(){ 
    document.getElementById("pic-94").style.visibility = "visible"; 
    document.getElementById("pic-92").style.visibility = "hidden"; 
    document.getElementById("pic-93").style.visibility = "hidden"; 
    document.getElementById("pic-91").style.visibility = "hidden"; 
    document.getElementById("pic-95").style.visibility = "hidden"; 
    } 
    function show95(){ 
    document.getElementById("pic-95").style.visibility = "visible"; 
    document.getElementById("pic-92").style.visibility = "hidden"; 
    document.getElementById("pic-93").style.visibility = "hidden"; 
    document.getElementById("pic-94").style.visibility = "hidden"; 
    document.getElementById("pic-91").style.visibility = "hidden"; 
    } 
    /* Slide 10 */ 
    function show101(){ 
    document.getElementById("pic-101").style.visibility = "visible"; 
    document.getElementById("pic-102").style.visibility = "hidden"; 
    document.getElementById("pic-103").style.visibility = "hidden"; 
    document.getElementById("pic-104").style.visibility = "hidden"; 
    document.getElementById("pic-105").style.visibility = "hidden"; 
    } 
    function show102(){ 
    document.getElementById("pic-102").style.visibility = "visible"; 
    document.getElementById("pic-101").style.visibility = "hidden"; 
    document.getElementById("pic-103").style.visibility = "hidden"; 
    document.getElementById("pic-104").style.visibility = "hidden"; 
    document.getElementById("pic-105").style.visibility = "hidden"; 
    } 
    function show103(){ 
    document.getElementById("pic-103").style.visibility = "visible"; 
    document.getElementById("pic-102").style.visibility = "hidden"; 
    document.getElementById("pic-101").style.visibility = "hidden"; 
    document.getElementById("pic-104").style.visibility = "hidden"; 
    document.getElementById("pic-105").style.visibility = "hidden"; 
    } 
    function show104(){ 
    document.getElementById("pic-104").style.visibility = "visible"; 
    document.getElementById("pic-102").style.visibility = "hidden"; 
    document.getElementById("pic-103").style.visibility = "hidden"; 
    document.getElementById("pic-101").style.visibility = "hidden"; 
    document.getElementById("pic-105").style.visibility = "hidden"; 
    } 
    function show105(){ 
    document.getElementById("pic-105").style.visibility = "visible"; 
    document.getElementById("pic-102").style.visibility = "hidden"; 
    document.getElementById("pic-103").style.visibility = "hidden"; 
    document.getElementById("pic-104").style.visibility = "hidden"; 
    document.getElementById("pic-101").style.visibility = "hidden"; 
    } 

Я вижу это как победа -lol. Но серьезно, я не такой яркий, но даже я думаю, что есть намного проще, чем это.

И просто чтобы дать вам обзор того, что этот скрипт часть:

Простой слайдер с 10 слайдов
Каждый слайд имеет 5 кнопок
Когда одна из этих кнопок наведен ДИВ шляпа содержит появляется определенная картина, в то время как другие становятся скрытыми.

Так я считаю, что мне нужно, что большое количество функций, но я думаю, что есть лучший способ сделать это

ответ

0

Что-то подобное может работать.

 function show(show, pictures) { 
    for (i = 0; i < pictures.length; i++) { 
     document.getElementById(pictures[i]).style.visibility = "hidden"; 
    } 
    document.getElementById(show).style.visibility = "visible"; 
} 

show('pic-1', ["pic-1","pic-2", "pic-3"]); 
+0

Проблема с этим решение заключается в том, что каждый раз, когда он добавляет новый элемент, он должен добавлять к массиву. И, как сказал ОП, у него есть 50 таких. Не лучшее решение imo. –

+0

@ Isuckatprogramming «Даже смерть не меньше, тогда он стоит жизнь». OP может объявить разные массивы и предоставить выделенный массив функции. – reporter

+0

@reporter Как не-родной английский динамик, я не совсем понял. –

0

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

, например:

function show1(){ 
    $('.Class_for_all_elements_you_want_to_hide').css('display', 'none'); 
    } 

то же самое должно быть сделано для когда это вам нужно отобразить, и т.д ...

0

Это зависит от вашего использования .. если вы хотите, чтобы скрыть все изображения, то с одной строки кода вы можете сделать это как

$('img').hide(); 

из другого, если вы знаете, что все изображения шкура в соответствующем случае, то вы можете установить все эти изображения до определенного класса и скрыть тот класс

$('.classname').css('display', 'none'); 

или же вы можете набор imageids как массив и с помощью петли вы можете сделать это

0
function show(pic, slide) { 

document.querySelectorAll("[id^=pic-"+slide+"]").style.visibility = "hidden"; 
    document.getElementById("pic-"+slide+number).style.visibility = "visible"; 
} 

этот код скрыть все фотографии слайда и после этого показывает только изображение, которое вы дали параметром

0

JSFiddle: http://jsfiddle.net/9d57a69f/

Pure Javascript

showElement('elementIdToShow'); 
showElement('pic1'); // Call this way to show pic1 

    function showElement(id) { 
     var elements = document.getElementsByClassName("pic"); //This might fail in old browser versions. If you want to support those pick up all elements in another way, the logic can continue the same. 
     for(var i=0; i<elements.length; i++) { 
      elements[i].style.visibility = "hidden"; 


     } 
     document.getElementById(id).style.visibility = "visible"; 
    } 

Если вы можете использовать JQuery

showElement('pic1'); 
function showElement(id) { 
    $('.pic').hide(); //Get all elements that contains class called pic and hide it 
    $("#"+id).show(); //Get element by a specific ID and show it 
} 

HTML

<div id="pic1" class="pic">1</div> 
<div id="pic2" class="pic">2</div> 
<div id="pic3" class="pic">3</div> 
<div id="pic4" class="pic">4</div> 
<div id="pic5" class="pic">5</div> 
+0

Будьте осторожны с использованием 'getElementsByClassName()'. Там все еще существует много браузеров, они поддерживают только более старые версии Javascript. И этот метод не существует. – reporter

+0

Да, это зависит от того, хочет ли он поддерживать старые версии. В случае, если он хочет что-то действительно перекрестное браузера, тогда лучше использовать JQuery, который хорошо его обрабатывает. Или просто подобрать все элементы по-другому. Логика hide/show может продолжаться так же. –

+0

Меня интересует метод jQuery, не могли бы вы объяснить немного больше, пожалуйста? –

0

Постарайтесь не воссоздать колесо, некоторые огромная библиотека уже существует (вы можете использовать свои изображения)

См: https://github.com/hakimel/reveal.js

Смежные вопросы