javascript - JQuery动态更新总数

Question

每次通过单击按钮创建一个新的 div 时，我想动态地保持顺序以便在创建一个 div 时它变为 1 of 1，然后 < em>1 of 2 当创建另一个 div 和删除 div 时，它恢复为 1 of 1 等等。

我试过使用 each 来更新所有特定的标签，但它们不会在每次添加新的 div 时都更新自己。这是代码:

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;
  });
});

<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>

怎么可能启用它？这是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

...

更新

根据您的评论，我相信您计划有一个删除按钮，以便能够删除轨道，然后更新索引/总数。

你可以这样做:

$(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)

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