Question

我有以下代码，我正在尝试创建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>

foreach中有多个手风琴javascript

0 个答案: