Question

每次通过按钮点击创建新div时，我想动态保留订单，这样当创建一个div时，它变为 1 of 1 ，然后 1 2 当创建另一个div并且删除div时它将恢复为 1 of 1 等。

我尝试使用each更新所有特定代码，但每次添加新div时它们都不会自动更新。这是代码：

＆＃13;

iadd = 0;
itotal = 0;


$('#add').click(function() {
  iadd++;
  $('<div class="input-group col-sm-offset-4 col-sm-3" name="music" id="music' + iadd + '"><label for="phone" class="control-label"><b>Track ' + iadd + ' of ' + itotal + '</b></label><input type="text" class="form-control" name="music1" placeholder="Email" value="" id="music1" data-name="musicAdd" /><br><input type="text" class="form-control" name="email2" placeholder="Description" value="" id="music2" data-name="emailDesc"/></div>').appendTo('#musics');
  $('.control-label').each(function() {
    itotal = iadd;
  });
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="add">Add</button>
<div class="form-group" id="musics"></div>

＆＃13;

怎么可能启用它？这是JSFiddle

Answer 1

我会这样：

$(function () {
    $('#add').on('click', function () {
        // The total is the number of divs within the main container + 1.
        // + 1 because we're calculating it before actually appending the new one.
        var total = $('#musics div').length + 1;
        // The current index is exactly the total (you could save a variable here).
        var index = total;

        // Create the new div and append it to the main container.
        var newDiv = $('<div class="input-group col-sm-offset-4 col-sm-3" name="music" id="music' + index + '"><label for="phone" class="control-label"><b>Track ' + index + ' of ' + total + '</b></label><input type="text" class="form-control" name="music1" placeholder="Email" value="" id="music1" data-name="musicAdd" /><br><input type="text" class="form-control" name="email2" placeholder="Description" value="" id="music2" data-name="emailDesc"/></div>').appendTo('#musics');
        
        // Loop through the new div siblings (filtering the type just to make sure),
        // and update their labels with the index/total.
        newDiv.siblings('div').each(function (ix, el) {
            $('label', el).html('<b>Track ' + (ix + 1) + ' of ' + total + '</b>');
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add</button>
<div class="form-group" id="musics"></div>

Demo (jsFiddle)

...

如果你想进一步（有些prototype）：

// The explanation for the code below is basically the same you can
// find in the code above, with the exception of using prototype
// to create a format method, where you replace items within a string.

String.prototype.format = function () {
    var value = this.toString();

    for (var i = 0, len = arguments.length; i < len; i++) {
        value = value.replace(new RegExp('\{[' + i + ']\}', 'g'), arguments[i]);
    }

    return value;
}

String.format = function () {
    if (arguments.length == 0) return '';

    var value = arguments[0].toString();
    for (var i = 1, len = arguments.length; i < len; i++) {
        value = value.replace(new RegExp('\{[' + (i - 1) + ']\}', 'g'), arguments[i]);
    }

    return value;
}

$(function () {
    $('#add').on('click', function () {
        var total = $('#musics div').length + 1;
        var index = total;
        var labelHtml = '<b>Track {0} of {1}</b>';

        var newDiv = $('<div class="input-group col-sm-offset-4 col-sm-3" name="music" id="music{0}"><label for="phone" class="control-label">' + labelHtml.format(index, total) + '</label><input type="text" class="form-control" name="music1" placeholder="Email" value="" id="music1" data-name="musicAdd" /><br><input type="text" class="form-control" name="email2" placeholder="Description" value="" id="music2" data-name="emailDesc"/></div>'.format(index)).appendTo('#musics');

        newDiv.siblings('div').each(function (ix, el) {
            $('label', el).html(labelHtml.format((ix + 1), total));
        });
    });
});

Demo

...

<强>更新

根据您的评论，我相信您计划删除button以删除曲目，然后更新索引/总数。

你可以这样做：

$(function () {
    // A single function to update the tracks indexes/total.
    function sortTracks() {
        // Not like the first piece of code in the beginning of the answer,
        // here we don't add 1 to the length, because the elements will be
        // already in place.
        var $tracks = $('#musics .input-group');
        var total = $tracks.length;
        
        $tracks.each(function (ix, el) {
            $('label', el).html('<b>Track ' + (ix + 1) + ' of ' + total + '</b>');
        });
    }
    
    $('#add').on('click', function () {
        var index = $('#musics div').length + 1;

        $('<div class="input-group col-sm-offset-4 col-sm-3" name="music" id="music' + index + '"><label for="phone" class="control-label"></label><input type="text" class="form-control" name="music1" placeholder="Email" value="" id="music1" data-name="musicAdd" /><br><input type="text" class="form-control" name="email2" placeholder="Description" value="" id="music2" data-name="emailDesc"/><button class="delete">Delete</button></div>').appendTo('#musics');
        
        sortTracks();        
    });
    
    $('#musics').on('click', '.delete', function () {
        // Remove this element's immediate parent with class = input-group.
        $(this).closest('.input-group').remove();
        
        sortTracks();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add</button>
<div class="form-group" id="musics"></div>

Demo (jsFiddle)

注意：如果您检查用于创建曲目的HTML string，您会注意到inputs有硬编码ids，因此您将有多个元素共享相同的id，这是错误的。 IDs应始终是唯一的。

JQuery动态更新总计

1 个答案: