Question

我在foreach循环下有jquery UI手风琴div，在每个div里面我有两个按钮。一个是添加按钮。单击“添加”按钮时，将通过使用select2 jquery UI的下拉按钮进行交换。从下拉列表中选择值时，将使用ajax调用将其保存到数据库。

我的问题是这个场景只适用于第一个手风琴乐队。但是对于其他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";
     }

Answer 1

您对所有div组使用相同的id名称，导致只使用第一个。如果$ grp-＆gt;名称是唯一的，请使用此名称swapper

更改ID和功能调用中的<?= $grp->name ?>

Answer 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

2 个答案: