Question

我有一个表单，当用户点击添加更多按钮时会获得克隆。

这就是我的html外观：

<div class="col-xs-12 duplicateable-content">
    <div class="item-block">
        <button class="btn btn-danger btn-float btn-remove">
            <i class="ti-close"></i>
        </button>
        <input type="file" id="drop" class="dropify" data-default-file="https://cdn.example.com/front2/assets/img/logo-default.png" name="sch_logo">
    </div>
    <button class="btn btn-primary btn-duplicator">Add experience</button>
    ...
</div>

这是我的jquery部分：

$(function(){ 
    $(".btn-duplicator").on("click", function(a) {
        a.preventDefault();          
        var b = $(this).parent().siblings(".duplicateable-content"),
        c = $("<div>").append(b.clone(true, true)).html();          
        $(c).insertBefore(b);
        var d = b.prev(".duplicateable-content");
        d.fadeIn(600).removeClass("duplicateable-content")
    })
});

现在我希望每次用户点击添加更多按钮时，输入类型文件的id和类应该变成唯一的，有些人可能会想到为什么我这样做，它因为dropify插件不起作用被克隆后，但是当我给它唯一的ID和类开始工作时，这就是我尝试过的：

function randomString(len, an){
    an = an&&an.toLowerCase();
    var str="", i=0, min=an=="a"?10:0, max=an=="n"?10:62;
    for(;i++<len;){
      var r = Math.random()*(max-min)+min <<0;
      str += String.fromCharCode(r+=r>9?r<36?55:61:48);
    }
    return str;
} var ptr = randomString(10, "a");
var className = $('#drop').attr('class');
var cd =    $("#drop").removeClass(className).addClass(ptr);

此后，我就是如何启动插件$('.' + ptr).dropify()。

但由于id仍然相同，我无法生成多个克隆。

每次用户点击它时，如何更改ID和类？有更好的方法吗？

Answer 1

<强> Working Fiddle

问题：   您正在克隆包含已初始化的dropify输入的div，以及在您尝试克隆它并在第二次克隆后重新启动它时会产生冲突的内容。

解决方案：为要克隆的dropify div创建模型div，而不添加dropify类，以防止$('.dropify').dropify()初始化输入，然后添加类{{1}在克隆期间。

型号div代码：

dropify

JS代码：

<div class='hidden'>
    <div class="col-xs-12 duplicateable-content model">
        <div class="item-block">
            <button class="btn btn-danger btn-float btn-remove">
                X
            </button>
            <input type="file" data-default-file="http://www.misterbilingue.com/assets/uploads/fileserver/Company%20Register/game_logo_default_fix.png" name="sch_logo">
        </div>
        <button class="btn btn-primary btn-duplicator">Add experience</button>
    </div>
</div>

希望这有帮助。

Answer 2

试试这个：

$(function() {
  $(document).on("click", ".btn-duplicator", function(a) {
    a.preventDefault();
    var b = $(this).parent(".duplicateable-content"),
      c = b.clone(true, true);
    c.find(".dropify").removeClass('dropify').addClass('cropify')
      .attr('id', b.find('[type="file"]')[0].id + $(".btn-duplicator").index(this)) //<here
    $(c).insertBefore(b);
    var d = b.prev(".duplicateable-content");
    d.fadeIn(600).removeClass("duplicateable-content")
  })
});

Fiddle

Answer 3

这是您使用与您的示例不同的示例执行的操作：

<div id="template"><span>...</span></div>
<script>
function appendrow () {
html = $('#template').html();
var $last = $('.copy').last();
var lastId;
if($last.length > 0) {
    lastId = parseInt($('.copy').last().prop('id').substr(3));
} else {
    lastId = -1;
}
$copy = $(html);
$copy.prop('id', 'row' + (lastId + 1));
$copy.addClass('copy');
if(lastId < 0)
    $copy.insertAfter('#template');
else
    $copy.insertAfter("#row" + lastId);
}

appendrow();
appendrow();
appendrow();
</script>

Answer 4

尝试向所有dropify输入添加一个类（例如'dropify'）。然后，您可以使用以下方法将每个元素ID设置为生成的值：

inputToAdd.attr('id', 'dropify-input-' + $('.dropify').length );

每次添加另一个按钮时，$（'。dropify'）。长度将增加1，因此您和每个按钮都有一个唯一的ID。

如何动态添加工作dropify输入

4 个答案: