В зависимости от id показать div

Dale™

Всем привет! Есть таблица. В таблице в 1 ячейке есть список DIVов и у каждого свой ID. В другой ячейке есть картинка, при нажатии на которую запускается функция + передается значение. В функции, в зависимости от значения нужно показать определенный DIV. Все лишнее убрал из кода. Подскажите пожалуйста синтаксис обращения к DIVам в JS. Вот как именно им сказать, чтобы они поменялись.Буду очень благодарен.Собственно код:
<style type="text/css">
    #image_list > div {
            display: none; /* Скрываем все слои */
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
 
            function smnkrtnk(znach) {
                  if (znach == 2)       {Показать второй DIV с id 2, остальные скрыть}
                  else if (znach == 3)  {Показать третий DIV DIV с id 3, остальные скрыть}
                  else if (znach == 4)  {Показать четвертый DIVDIV с id 4, остальные скрыть}
                  else if (znach == 5)  {Показать пятый DIVDIV с id 5, остальные скрыть}
            };   
</script>
<table border=0 cellpading=0 cellspacing=30>
<tr>
<td rowspan=5 colspan=2>
        <div id="image_list">
            <div class="slide" id="1" style="display: block;">
            <img src="http://окна-промо.рф/wp-content/uploads/2014/02/onewin/solid_w.jpg" alt=""/>
            </div>
            <div class="slide" id="2">
                <img src="http://окна-промо.рф/wp-content/uploads/2014/02/onewin/big/turn4rd_w.jpg" alt=""/>
            </div>
            <div class="slide" id="3">
                <img src="http://окна-промо.рф/wp-content/uploads/2014/02/onewin/big/turnrew_w.jpg" alt=""/>
            </div>
            <div class="slide" id="4">
                <img src="http://окна-промо.рф/wp-content/uploads/2014/02/onewin/big/flipturn4rd_w.jpg" alt=""/>
            </div>
            <div class="slide" id="5">
                <img src="http://окна-промо.рф/wp-content/uploads/2014/02/onewin/big/flipturnrew_w.jpg" alt=""/>
            </div>
        </div>
</td>
<td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr>
<td>
<a onclick="smnkrtnk(2)">
<img src="http://окна-промо.рф/wp-content/uploads/2014/02/onewin/turn_small.jpg">
</a>
</td>
<td>
<a onclick="smnkrtnk(3)">
<img src="http://окна-промо.рф/wp-content/uploads/2014/02/onewin/turn4rd_small.jpg">
</a>
</td>
<td></td><td></td><td></td>
</tr>
<tr>
<td>
<a onclick="smnkrtnk(4)">
<img src="http://окна-промо.рф/wp-content/uploads/2014/02/onewin/flipturn_small.jpg">
</a>
</td>
<td>
<a onclick="smnkrtnk(5)">
<img src="http://окна-промо.рф/wp-content/uploads/2014/02/onewin/flipturn4rd_small.jpg">
</a>
</td>
<td></td><td></td></tr>
<tr><td></td></tr>
</table>
Если кому интересно, реализовал следующим способом. Коряво конечно, но как есть.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
            function smnkrtnk(znach) {
                      if (znach == 2) {
                                        obj=document.getElementById("slvnprv");
                                        obj2=document.getElementById("glhstvrk");
                                        obj3=document.getElementById("sprvnlv");
                                        obj4=document.getElementById("vrhprv");
                                        obj5=document.getElementById("vrhlv");
                                        obj2.style.display="none";
                                        obj3.style.display="none";
                                        obj4.style.display="none";
                                        obj5.style.display="none";
                                        obj.style.display="block";                                        
                                   }
                      else if (znach == 3) {
                                        obj=document.getElementById("sprvnlv");
                                        obj2=document.getElementById("glhstvrk");
                                        obj3=document.getElementById("slvnprv");
                                        obj4=document.getElementById("vrhprv");
                                        obj5=document.getElementById("vrhlv");
                                        obj2.style.display="none";
                                        obj3.style.display="none";
                                        obj4.style.display="none";
                                        obj5.style.display="none";
                                        obj.style.display="block";                                       
                                   }
                      else if (znach == 5) {
                                        obj=document.getElementById("vrhprv");
                                        obj2=document.getElementById("glhstvrk");
                                        obj3=document.getElementById("sprvnlv");
                                        obj4=document.getElementById("slvnprv");
                                        obj5=document.getElementById("vrhlv");
                                        obj2.style.display="none";
                                        obj3.style.display="none";
                                        obj4.style.display="none";
                                        obj5.style.display="none";
                                        obj.style.display="block";                                       
                                   }
                      else if (znach == 4) {
                                        obj=document.getElementById("vrhlv");
                                        obj2=document.getElementById("glhstvrk");
                                        obj3=document.getElementById("sprvnlv");
                                        obj4=document.getElementById("vrhprv");
                                        obj5=document.getElementById("slvnprv");
                                        obj2.style.display="none";
                                        obj3.style.display="none";
                                        obj4.style.display="none";
                                        obj5.style.display="none";
                                        obj.style.display="block";                                       
                                   };
                                      };
</script>
4 ответа

Dale™

Оптимизируйте js-код следующим способом. Если значение в переменной znach соответствует id, то вместо кучи if сначала скройте все 5 блоков
document.getElementById("<ваш ид>").style.display = "none";
А потом откройте в конце необходимый.Если ид и значение переменной разное, то:
if (znach==1) {currentId = "<ваш текущий ид>" }
Далее скрывать все блоки, а потом открыть, только вместо ид подставляете currentId


Dale™

По поводу, чтобы сразу скрыть все блоки это да, спасибо. А вот по поводу "Если ид и значение переменной разное, то:"
if (znach==1) {currentId = "<ваш текущий ид>" }
Тут точно ошибки никакой нет? Я не совсем понял для чего это. Как это заменит кучу IF?


Dale™

Сел за комп. Распишу подробнее. Как я вижу, у вас очень много повторяющегося кода. Но по поводу "закрыть все блоки" вы поняли. Далее. Вам надо открыть один блок. Но как узнать его ид? Можно использовать кучу if, но их содержимое будет короче.
if (znach == 2) {
currentId = "slvnprv";
}
if (znach == 5) {
currentId = "vrhprv";
}
А далее просто открываем блок
document.getElementById(currentId ).style.display = "block";
А вообще, я использую похожие ид, отличающиеся порядковым номером. Например, block1/block2/block3. В скрипт передаю только цифру, она и короче и универсальнее дальнейшее использование. Для Вашего случая решение. Переименовать все ид у div, передать в скрипт номер дива, который необходимо открыть. Далее все дивы закрываете, а необходимый открываете:
document.getElementById("template"+numberDiv).style.display = "block";
Как-то так =)


Dale™

Теперь все понятно, спасибо! Вариант по поводу универсального ID возьму на вооружение, пригодится он это точно. Но пока что от таких id отказываться не хочу, ибо на странице очень много элементов с id и различать их по сокращенному названию пока что удобней. В дальнейшем наверняка оптимизирую. Ещё раз спасибо!