时间戳

首页 > 解决方案 > 克隆后无法增加 id 选择框（codeigniter）

jquery - 克隆后无法增加 id 选择框（codeigniter）

问题描述

我想让 id="campaign" 像campaign1、campaign2、campaign3 等一样增加，但不幸的是我在多次单击克隆按钮后总是得到campaign1。有没有人如何使Id 完美增加？我知道我还是初学者

任何帮助将不胜感激。谢谢

查看html

<select id="campaign" class="form-control" >
   <option value="">- Choose Campaign -</option>
   <option values="1">1</option>
   <option values="2">2</option>
</select>
 <img src="<?php echo base_url();?>assets/add_icon.png" alt="add_icon" id="addCampaign"   class="add-icon">

jQuery 

$(function() {

    $('#addCampaign').click(function()
        {
            $("#campaign").clone().attr(`id`,`campaign` + $('#campaign').index()).insertAfter('#campaign');
        })

标签： jquery

解决方案

检查下面的片段多次使用相同的 id 不是一个好方法。您可以为所有选择指定相同的类，因此在选择中添加了“活动”类。

然后使用克隆最后一个选择框并将选择框的数量计算到选择框的主ID

var count = $(".campaign").length;

然后使用 :last 选择器在最后一个选择框之后附加新的选择框。

$(function() {

    $('#addCampaign').click(function()
        {
          var count = $(".campaign").length;
          $(".campaign:last").clone().attr(`id`,`campaign` + count).insertAfter('.campaign:last');
        })
        
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="campaign" class="form-control campaign" >
   <option value="">- Choose Campaign -</option>
   <option values="1">1</option>
   <option values="2">2</option>
</select>

  <img src="<?php echo base_url();?>assets/add_icon.png" alt="add_icon" id="addCampaign"   class="add-icon">

推荐阅读