javascript - 如何为 jQuery 动态文本框的项目编号

Question

我正在制作一个动态文本框表单。这是代码：

$(document).ready(function() {
        counter = 1;
    }).on('click', '.btn-add', function(e) {
        e.preventDefault();
        counter = counter + 1;

        var controlForm = $('.controls'),
            currentEntry = $(this).parents('.entry:last'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.entry:not(:first) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('text-success').addClass('text-danger')
            .html('-');
        currentEntry.find('.input-box')
            .attr('name', 'subject')
            .attr('placeholder', 'Materia ' + String(counter));
    }).on('click', '.btn-remove', function(e) {
        $(this).parents('.entry:last').remove();
        counter = counter - 1
        $(this).parents('.entry').each(function() {
            $(this).parents('.entry:last').attr('placeholder', 'Materia ' + String(counter));
        })

        e.preventDefault();
        return false;
    });

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="type-elements" class="controls">
    <div class="form-row entry">
        <div class="form-inline mb-3">
            <a role="button" class="btn btn-link text-success btn-add mr-1" href="">+</a>
            <input type="text" class="form-control mr-1 input-box" placeholder="Materia 1" required name="subject">
        </div>
        <div class="col">
            <select class="custom-select mb-3" required multiple size="3" name="classes">
                <option disabled>Seleziona una o più classi</option>
                <option>2DM</option>
                <option>2AM</option>
                <option>2DM</option>
                <option>2AM</option>
            </select>
        </div>
    </div>
</div>

如何为每个文本框提供一个动态数字，并且当我单击加号按钮时，将新文本框直接添加到第一个主文本框下方？

标签： javascriptjqueryhtml

Answer 1

使用prepentTo代替appendTo

$(document).ready(function() {
        counter = 1;
    }).on('click', '.btn-add', function(e) {
        e.preventDefault();
        counter = counter + 1;

        var controlForm = $('.controls'),
            currentEntry = $(this).parents('.entry:last'),
            newEntry = $(currentEntry.clone()).prependTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.entry:not(:first) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('text-success').addClass('text-danger')
            .html('-');
        currentEntry.find('.input-box')
            .attr('name', 'subject')
            .attr('placeholder', 'Materia ' + String(counter));
    }).on('click', '.btn-remove', function(e) {
        $(this).parents('.entry:last').remove();
        counter = counter - 1
        $(this).parents('.entry').each(function() {
            $(this).parents('.entry:last').attr('placeholder', 'Materia ' + String(counter));
        })

        e.preventDefault();
        return false;
    });

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="type-elements" class="controls">
    <div class="form-row entry">
        <div class="form-inline mb-3">
            <a role="button" class="btn btn-link text-success btn-add mr-1" href="">+</a>
            <input type="text" class="form-control mr-1 input-box" placeholder="Materia 1" required name="subject">
        </div>
        <div class="col">
            <select class="custom-select mb-3" required multiple size="3" name="classes">
                <option disabled>Seleziona una o più classi</option>
                <option>2DM</option>
                <option>2AM</option>
                <option>2DM</option>
                <option>2AM</option>
            </select>
        </div>
    </div>
</div>