无法在手风琴内交换 div答案

【问题标题】：Unable to swap divs inside accordion无法在手风琴内交换 div
【发布时间】：2015-05-03 07:36:08
【问题描述】：

我在 foreach 循环下有 jquery UI 手风琴 div，在每个 div 内我有两个按钮。一是添加按钮。单击添加按钮时，它会被使用 select2 jquery UI 的下拉按钮交换。当从下拉列表中选择一个值时，它会使用 ajax 调用保存到数据库中。

我的问题是这个场景只适用于第一个手风琴 div。但是对于其他 div，jquery 被禁用，因为 id 在 foreach 循环中重复。如果有人有更好的方法，请提供帮助。

注意：我正在使用 codeigniter。

<div  id="accordion">
   <?php  foreach ($groups as $grp): ?>
   <h3><?php echo $grp->name; ?></h3>
    <div>
      <div class="form-group" id="swapper-two"   style="display:none;"> 
         <select class="populate placeholder s2_service" id="getser" name=""> 
              <option value="">-- Select a value --</option>
              <option value=""> One </option>
              <option value=""> Two </option>
              <option value=""> Three </option>
      </div>   
     <div id="swapper-one" style="display:block" >
      <a href="javascript:swapping('swapper-one','swapper-two')"  ><button type="button" class="btn btn-default btn-xs btn-label-left"><i class="fa fa-plus"></i></button></a>

     </div>
  </div>   
</div>          
<?php endforeach; ?>

jquery 在这里：

     function swapping(div1,div2) {
      d1 = document.getElementById(div1);
      d2 = document.getElementById(div2);

      d1.style.display = "none";
      d2.style.display = "block";
     }

【问题讨论】：

如果 $grp->name 是唯一的，则在 id 和函数调用中更改交换器的名称 = $grp->name ?>
好吧，您应该拥有 id，因为唯一实体不能对多个元素具有相同的 ID。这就是为什么它适用于第一架手风琴。使 ID 生成动态化。
成功了！！非常感谢:)

标签： javascript jquery html css

【解决方案1】：

您对所有 div 组使用相同的 id 名称，这会导致只工作第一个。如果 $grp->name 是唯一的，则将 id 和函数调用中的 swapper 更改为此名称 <?= $grp->name ?>

【讨论】：

【解决方案2】：

要使代码通用，请将 id 更改为 class。试试这个解决方案

<div  id="accordion">
  <?php  foreach ($groups as $grp): ?>
  <h3><?php echo $grp->name; ?></h3>
  <div>
  <div class="form-group" class="swapper-two"   style="display:none;"> 
     <select class="populate placeholder s2_service" id="getser" name=""> 
          <option value="">-- Select a value --</option>
          <option value=""> One </option>
          <option value=""> Two </option>
          <option value=""> Three </option>
  </div>   
 <div class="swapper-one" style="display:block" >
  <a href="#"><button type="button" class="btn btn-default btn-xs btn-label-left myBtn"><i class="fa fa-plus"></i></button></a>

 </div>
 </div>   
</div>          
<?php endforeach; ?>

jquery 在这里：

<script>
$(function(){
  $(document).on('click', '.myBtn', function(e){
       e.preventDefault();
       $(this).prev().show(); // show swapper two
       $(this).parent().hide(); // hide swapper one
  })
})
</script>

P/s : 我不确定你做的最接近的 foreach 是否正确。似乎在父手风琴div之外

【讨论】：