无法更换手风琴内的div

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

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

来源

2015-05-03 aug born

如果$ grp->名称是唯一的，更改交换ID和在这个名字的功能名称？> – splash58

好吧，你应该有ID作为唯一的实体不能有相同的ID多个元素。这就是为什么它的第一手风琴工作。使ID生成动态。 – vinayakj

它工作了！非常感谢:) –

您的DIV导致工作只是第一个所有组使用相同的ID名称。如果$ grp-> name是唯一的，请在id中更改swapper，并按此名称更改<?= $grp->name ?>

来源

2015-05-03 08:05:34 splash58

要使代码具有通用性，请将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正确与否。看起来像父亲的外部亲

来源

2015-05-03 08:10:41

无法更换手风琴内的div

回答

相关问题