Переключение div через скрипт в wordpress

Question

У меня есть следующий код для переключения между двумя div:

<script>
function SwapDivsWithClick(div1,div2)
{
   d1 = document.getElementById(div1);
   d2 = document.getElementById(div2);
   if( d2.style.display == "none" )
   {
      d1.style.display = "none";
      d2.style.display = "block";
   }
   else
   {
      d1.style.display = "block";
      d2.style.display = "none";
   }
}

var divs = [ "zdroj1", "zdroj2" ];
function toggle(layer) {
    var d
    for(var i = 0; i < divs.length; i += 1) {
        d = document.getElementById(divs[i]);
        d.style.display = 'none';
    }
    d = document.getElementById(layer);
    d.style.display = '';
}
</script>

И часть HTML:

<table>
<tbody>
<tr>
<td class="btn" style="text-align: center;"><a href="javascript:toggle('zdroj1')" ><b>VIDEO 1</b></a></div></td>
<td class="btn" style="text-align: center;"><a href="javascript:toggle('zdroj2')" ><b>VIDEO 2</b></a></div></td>

</tr>
</tbody>
</table>  

<div id="zdroj1">
VIDEO CODE 1</div>

<div id="zdroj2" style="display:none;">
VIDEO CODE 2</div>

Как я могу добавить больше div и показать только этот по какой ссылке нажимают? Я думаю, что в скрипте должно быть больше функций if, но я не уверен, потому что я новичок ie в этой части кодирования. Заранее спасибо!

Answer 1

Изменить: в зависимости от ваших потребностей иметь динамическое c количество div / кнопок на каждой странице, см. Код ниже. Вместо того, чтобы вручную создавать прослушиватель событий щелчка, вам нужно получить массив (-i sh) кнопок на основе общего имени класса (для этого также можно использовать querySelector) и добавить прослушиватель событий к каждой. Кнопки должны быть созданы с атрибутом данных (или другим идентификатором), который соответствует одному из div, который вы хотите переключить.

Внутри вызываемой функции вы можете l oop через все ваши div msg , скройте их все и отобразите тот, который соответствует атрибуту данных нажатой кнопки. Этот метод позволяет вам иметь любое количество кнопок и div, если каждая кнопка имеет соответствующий div для переключения.

// Find all the buttons and divs that have the common className for each
var buttons = document.getElementsByClassName('button')
var divs = document.getElementsByClassName('msg')

function toggle() {
    // Loop through the divs and hide them all
    for(var i = 0; i < divs.length; i += 1) {
     divs[i].style.display = 'none';
    }
    // Show the div whose id matches the data-message attribute of the button that was clicked
    document.getElementById(this.dataset.message).style.display = 'block';
}

// Add a click listener to each button to run the toggle function
for(var i = 0; i < buttons.length; i += 1) {
  buttons[i].addEventListener('click', toggle, false)
}

<table>
 <tbody>
  
   <tr>
    <!-- Add a common class to all buttons and a data-message attribute to each button
         that corresponds to the id of the div it will toggle on-->
   <td class="btn"><button class="button" data-message="msg1">VIDEO 1</button></td>
   <td class="btn"><button class="button" data-message="msg2">VIDEO 2</button></td>
   <td class="btn"><button class="button" data-message="msg3">VIDEO 3</button></td>
   <td class="btn"><button class="button" data-message="msg4">VIDEO 3</button></td>
  </tr>
 </tbody>
</table>

  <!-- Add a common class to all divs that will be toggled -->
<div class="msg" id="msg1">
 VIDEO CODE 1
</div>

<div class="msg" id="msg2" style="display:none;">
 VIDEO CODE 2
</div>

<div class="msg" id="msg3" style="display:none;">
 VIDEO CODE 3
</div>

<div class="msg" id="msg4" style="display:none;">
 VIDEO CODE 4
</div>