Question

我有以下从django model_formset呈现的表单。它从一个表单和一些静态控件（如日期等）开始。表单集字段位于'form-wrapper'div

中

<form action="/customer/images/1/upload_xray" method="post" id="xrayform" enctype="multipart/form-data">
    <input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="1"><input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="0"><input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000">
    <input type="hidden" name="csrfmiddlewaretoken" value="LI1L39J1C7P4tQeqfJhL5CBuW283FmOI">
    <div class="form-group">
        <label for="date">Date</label>
        <input id="date" type="text" name="date" class="form-control input-sm datepicker input-append date" readonly="">
    </div>
    <div class="form-group">
        <label for="id_title">Title</label>
        <select class="form-control input-sm" id="id_title" name="title">
            <option value="" selected="selected">---------</option>
            <option value="Observation">Observation</option>
            <option value="Initial">Initial</option>
            <option value="Progress">Progress</option>
            <option value="Final">Final</option>
            <option value="Post Treatment">Post Treatment</option>
        </select>
    </div>
    <hr class="divider">
    <div class="form-wrapper">
        <div class="form-group">
            <label for="id_form-0-image">Image</label>
            <input id="id_form-0-image" name="form-0-image" type="file">
        </div>
        <div class="form-group">
            <label for="id_form-0-type">Type</label>
            <select class="form-control input-sm" id="id_form-0-type" name="type">
                <option value="" selected="selected">---------</option>
                <option value="xray">X-ray Image</option>
                <option value="internal">Intraoral Image</option>
                <option value="external">Extra-oral Image</option>
                <option value="model">Model</option>
            </select>
        </div>
        <div class="form-group">
            <label for="id_form-0-desc">Desc</label>
            <select class="form-control input-sm" id="id_form-0-desc" name="form-0-desc">
                <option value="" selected="selected">---------</option>
                <optgroup label="Xray" />
                <option value="PA Ceph">PA Ceph</option>
                <option value="Lateral Ceph">Lateral Ceph</option>
                <option value="Panoramic">Panoramic</option>
                <optgroup label="Interior oral">
                <option value="Anterior Occlution">Anterior Occlution</option>
                <option value="Anterior Occlusion Relaxed">Anterior Occlusion Relaxed</option>
                <option value="Overjet Right">Overjet Right</option>
                <option value="Overjet Left">Overjet Left</option>
                <option value="Right Occlusion">Right Occlusion</option>
                <option value="Left Occlusion">Left Occlusion</option>
                <option value="Upper Occlusal">Upper Occlusal</option>
                <option value="Lower Occlusal">Lower Occlusal</option>
                <optgroup label="External oral" />
                <option value="Frontal">Frontal</option>
                <option value="Lateral Right">Lateral Right</option>
                <option value="Lateral Left">Lateral Left</option>
                <option value="Oblique smile Right">Oblique smile Right</option>
                <option value="Oblique smile Left">Oblique smile Left</option>
                <option value="Frontal smile">Frontal smile</option>
                <option value="Oblique Right">Oblique Right</option>
                <option value="Oblique Left">Oblique Left</option>
                <optgroup label="Model"/>
                <option value="Model Upper Occlusal">Model Upper Occlusal</option>
                <option value="Model Lower Occlusal">Model Lower Occlusal</option>
                <option value="Model Right Buccal">Model Right Buccal</option>
                <option value="Model Left Buccal">Model Left Buccal</option>
                <option value="Model Anterior Dental">Model Anterior Dental</option>
            </select>
        </div>
    </div>                        
</form>
<div class="row">
    <button class="btn btn-sm btn-success pull-right" id="add-form">+</button>
</div>

添加按钮添加一个新的表单包装元素，并将正确的输入字段增加1，以便django的model_formset正常运行。每个新的form-wrapper元素都包含一个删除按钮以删除它。在删除时，javascript会再次更正id和值，以使formset正常运行。我已经使它工作，但使用了很多.each方法。你认为这是一个更好的方法吗？

的javascript

$(document).on('click','.delete', function (e){
    e.preventDefault();
    var forms;
    var index = parseInt($(this).prop('id')) - 1;        
    var formWrapper = $(".form-wrapper")[index];        
    formWrapper.remove();
    forms = $(".form-wrapper");
    $("#id_form-TOTAL_FORMS").val(parseInt($("#id_form-TOTAL_FORMS").val()) - 1);
    forms = $('.form-wrapper');
    forms.each(function (index, item){
        var form_groups = $(item).children('.form-group');
        form_groups.each(function (index2, item2){
            controls =  $(item2).children();
            controls.each(function(index3, item3){
                var id = $(item3).prop('id');
                parts = id.split('-');
                parts[1] = String(index);
                id = parts.join('-');
            });
        });
    });
    $('button.delete').each(function(index, item){
        var id = parseInt($(item).prop('id'));            
        id = index + 2; //First start button starts with id=2 as in "delete 2nd form"
        console.log('id after '+id);
        $(item).prop('id', id);
    });
});

Basicaly让formwrappers知道有多少表单，每个孩子（表单组）然后每个孩子（控制元素）并更改他们的id。速度没有任何问题，它很好用，但不喜欢它的清洁度。

Answer 1

您可以使用.attr（）之类的

$('button.delete').attr('id', function (index, item) {
    return index + 2;
});

演示：Fiddle

使用jquery更改控件id的更好方法

1 个答案: