Question

单击以克隆带有标签的输入时，我将创建按钮。克隆时，我需要自动增加输入和标签ID。

我的代码更改了div的ID，但未更改输入和标签ID。任何解决方案

var cloneCount = 1;
///////////////////////////////
var stdTrip = $("#parentImagesContainer").children(".childImagesContainer").first().clone('.addImage').attr('id', 'customFile' + cloneCount++).insertAfter($('[id^=customFile]:last'));

$(document).on('click', '.addImage',function() {
    append_trips();
});

function append_trips() {
    var objHtml = stdTrip.clone('.addImage').attr('id', 'customFile' + cloneCount++).insertAfter($('[id^=customFile]:last'));
    $("#parentImagesContainer").append(objHtml);
}
//////////////////////////////////////////////
$(document).on("click", ".removeImage", function(){
    if($('#parentImagesContainer .childImagesContainer').length > 1)
    {
        $(this).closest(".childImagesContainer").remove();
    }
    else
    {
        alert(300);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parentImagesContainer">
    <div class="form-group m-form__group row childImagesContainer">
        <label class="col-form-label col-lg-2">title</label>
        <div class="col-lg-8">
            <div></div>
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="customFile" name="images[]">
                <label class="custom-file-label" for="customFile">image</label>
            </div>
        </div>
        <div class="col-2">
            <a href="javascript:;" class="btn btn-brand m-btn m-btn--custom addImage">
                                    <i class="fa fa-plus"></i>add
                                </a>
            <a href="javascript:;" class="btn btn-danger m-btn m-btn--custom removeImage">
                                    <i class="fa fa-minus"></i>remove
                                </a>
        </div>
    </div>
</div>

Answer 1

几乎永远不需要自动递增ID。

您的情况...

<input type="file" class="custom-file-input" id="customFile" name="images[]">
<label class="custom-file-label" for="customFile">image</label>

应该是...

<label class="custom-file-label">
    <input type="file" class="custom-file-input" name="images[]">
    image
</label>

如何更改输入和标签ID？

1 个答案: