Несколько аккордеонных JavaScript внутри foreach - PullRequest
Новая
       22

Несколько аккордеонных JavaScript внутри foreach

0 голосов
/ 25 сентября 2018

У меня есть следующий код, и я пытаюсь создать 2 отдельных аккордеона.Текущий код показывает внутри первого блока foreach рабочий аккордеон (текст переключается после щелчка), но внутри второго после щелчка ничего не происходит.

Как я могу восстановить текущий код, чтобы он работал для нескольких popup-p-body?

Примечание: весь код внутри PHP foreach, поэтому должно быть <?=$sit['id']?>.Если вы знаете другой способ, как с этим бороться - пишите. 

// $sit['id'] is 1,2 (inside PHP foreach)

<div class="popup-p-body">
  <div class="payment-tab pt_<?=$sit['id']?>">
    <div class="payment-radioGroup pi_<?=$sit['id']?>">
      <input id="get_help" name="report_radio" value="get_help" type="radio"/>
      <label for="get_help">Select 1</label>
    </div>
    <div class="form-group c-textarea">
      Example text
    </div>
  </div>
  <div class="payment-tab pt_<?=$sit['id']?> payment-tab-isActive">
    <div class="payment-radioGroup pi_<?=$sit['id']?>">
      <input id="report_an_issue" name="report_radio" value="report_an_issue" type="radio" checked/>
      <label for="report_an_issue">Select 2</label>
    </div>
    <div class="form-group c-textarea">
      Example text
    </div>
  </div>
</div>

<script>
$(document).ready(function(){

  var radios = document.querySelectorAll('.pi_<?=$sit['id']?> > input');
  for (var i = 0; i < radios.length; i++) {
    radios[i].addEventListener('change', expandAccordion_<?=$sit['id']?>);
  }
  function expandAccordion_<?=$sit['id']?> (event) {
    var allTabs = document.querySelectorAll('.pt_<?=$sit['id']?>');
    for (var i = 0; i < allTabs.length; i++) {
      allTabs[i].classList.remove('payment-tab-isActive');
    }
    event.target.parentNode.parentNode.classList.add('payment-tab-isActive');
  }
});
</script>
...