jquery - 当我在 jQuery 中复制它时，如何更改 HTML 的属性？

Question

我正在使用 jQuery 编写一个脚本，它将完全动态地复制 HTML div 的内容，然后添加一个按钮来删除相应的“新 div”。我基本上使用它作为向表单添加更多字段的方法。我会使用现有的脚本，但所有的脚本似乎都只添加输入字段并且不是很动态。这样，我可以使用按钮通过将它添加到 HTML 而不是 JavaScript 来准确复制我想要的内容。

就复制原始容器内容而言，一切似乎都运行良好。我唯一遇到的麻烦是为删除按钮分配一个 id。在我的示例中，“原始内容”的父 div 是“引用”...因此第一个“新内容”的 ID 应为“references-1”...确实如此。当我创建删除按钮(基于下面显示的 div 的内容)时，我想将它的 id 更改为“references-1”，这样当它被点击时，它会删除 ID 为 ' 的“新内容”div引用资料-1'。使用我当前的脚本，删除按钮的所有属性都没有更改...

有人有什么想法吗？

HTML

<div id="references">
    <!-- The content to duplicate.... excludes the parent div tag i.e. only the input tag. -->
    <input type="text" name="references[]" size="30" class="text-input" placeholder="Must contain a valid, working URL." style="position: relative;z-index: 0;">
</div>
<div id="more-references">
    <-- Where to put the new content -->
</div>
<div id="remove-button" style="visibility: hidden;">
    <-- The button that removes content --> <i class="fi-x"></i>

</div>  <i class="fi-plus" rel="addMore" id="references"></i>
<!-- The button that adds content -->

jQuery:

$(function(){

    var i = 0;

    var oldRemove = $('#remove-button');

    $('[rel="addMore"]').on('click', function(){

        i++;

        var newRemove = oldRemove.clone();

        var buttonID = $(this).attr("id");
        var container = $('#' + buttonID + '-content');
        var content = container.html();
        var insertionPoint = $('#more-' + buttonID);

        insertionPoint.append('<div id="' + buttonID + '-' + i + '">' + content + '</div>');    

        newRemove.prop('id', 'remove-' + buttonID + '-' + i);               
        insertionPoint.append(newRemove.html());        

    });

});

Answer 1

在这里和那里进行一些更正和一次修改，我们就可以开始了。首先，我将删除按钮 ID 更改为类。然后我将每个按钮将删除的 div 的 ID 存储在数据属性中。

其次，i 元素与要复制的 div 具有相同的 id，导致无效的 html，

第三，没有#references-content 元素，只有#references 存在。

一个简单的委托(delegate)绑定(bind)绑定(bind)所有的删除按钮:

$(function(){
    var i = 0;
    var oldRemove = $('div.remove-button'),
        div = $('<div/>');
    $(document).on('click', 'div.remove-button', function() {
        $( $(this).data('del') ).remove();
        $(this).remove();
    });

    $('[rel="addMore"]').on('click', function(){
        i++;
        var buttonID = $(this).data("id");
        var newRemove = oldRemove.clone().data('del','#' + buttonID + '-' + i).show();
        var container = $('#' + buttonID );
        var content = container.html();
        var insertionPoint = $('#more-' + buttonID);
        insertionPoint.append( div.clone().attr( 'id', buttonID + '-' + i ).html( content ) );
        insertionPoint.append( newRemove );        
    });
});

JS Fiddle

编辑

上面的代码已经过编辑，可以使用我之前错过的现有删除按钮。但是，我将 id 更改为一个类，并继续在每个按钮中存储它打算在数据属性 data-del 中删除的 id。

这是我对 HTML 所做的唯一更改:id --> class 和 visibility: hidden --> 显示:无。

<div class="remove-button" style="display:none;">
    <-- The button that removes content --> <i class="fi-x"></i>
</div>

要修改代码以便将新按钮添加到新的 div 中 - 我认为这是您可能会考虑的事情 - 进行以下修改:

insertionPoint.append( div.clone().attr( 'id', buttonID + '-' + i ).html( content ) );
insertionPoint.append( newRemove ); 

收件人:

insertionPoint.append( div.clone().attr( 'id', buttonID + '-' + i ).html( content ).append( newRemove ) ); 

并删除

$(this).remove();