Question

我有以下javascript http://jsfiddle.net/847Kf/4/，其中包含第14行和第36行的计数器。代码可以工作，但是当我删除我添加的项目并添加新项目时，计数器会从它离开的位置继续。例如：我插入4个项目1,2,3,4现在我删除第二个项目并添加一个新项目，所以我将有1,3,4,5。当我删除项目时，我怎么能做那个计数器应根据示例重置并重新显示值： 1,3,4,5 - 删除了一个项目，现在计数器应该将剩余项目的值更改为：1,2,3,4。

HTML：

<ul class="tags" data-prototype="&lt;div&gt;&lt;label class=&quot; required&quot;&gt;__name__&lt;/label&gt;&lt;div id=&quot;task_tags___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;task_tags___name___name&quot; class=&quot; required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;task_tags___name___name&quot; name=&quot;task[tags][__name__][name]&quot; required=&quot;required&quot; maxlength=&quot;255&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">
</ul>

使用Javascript：

// setup an "add a tag" link
var $addTagLink = $('<a href="#" class="add_tag_link">Add a tag</a>');
var $newLinkLi = $('<li></li>').append($addTagLink);

jQuery(document).ready(function() {
    // Get the ul that holds the collection of tags
   var $collectionHolder = $('ul.tags');

    // add the "add a tag" anchor and li to the tags ul
    $collectionHolder.append($newLinkLi);

    // count the current form inputs we have (e.g. 2), use that as the new
    // index when inserting a new item (e.g. 2)
    $collectionHolder.data('index', $collectionHolder.find(':input').length);

    $addTagLink.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();

        // add a new tag form (see code block below)
        addTagForm($collectionHolder, $newLinkLi);
    });


});

function addTagForm($collectionHolder, $newLinkLi) {
    // Get the data-prototype explained earlier
    var prototype = $collectionHolder.data('prototype');

    // get the new index
    var index = $collectionHolder.data('index');

    // Replace '$$name$$' in the prototype's HTML to
    // instead be a number based on how many items we have
    var newForm = prototype.replace(/__name__/g, index);

    // increase the index with one for the next item
    $collectionHolder.data('index', index + 1);

    // Display the form in the page in an li, before the "Add a tag" link li
    var $newFormLi = $('<li></li>').append(newForm);

    // also add a remove button, just for this example
    $newFormLi.append('<a href="#" class="remove-tag">x</a>');

    $newLinkLi.before($newFormLi);

    // handle the removal, just for this example
    $('.remove-tag').click(function(e) {
        e.preventDefault();

        $(this).parent().remove();

        return false;
    });
}

Answer 1

主要问题在于你如何计算元素创建新标记时，您可以更新数据的数量，但删除时不会注意到它您有两种选择：

删除值$collectionHolder.data('index', index - 1)
获取每次创作的数量，而不是在document ready

我注意到删除的另一个问题。当您创建每个元素时，您将向DOM中的每个.remove-tag附加一个删除事件，在第三个创建时，第一个元素将附加3个事件，第二个元素将附加两个。两个避免我做的事情：

＆＃13;

$('ul.tags').on('click','.remove-tag',function(e){
   e.preventDefault();
   $(this).parent().remove();
})

＆＃13;

这意味着＆＃34;在dom上查找ul.tag，如果在.remove-tag上触发了click事件，请执行此操作＆＃34;所以它对于创建的新标签保持活跃和活跃。

Answer 2

因为您有id个/ name个/ class个等，其中包含index。我建议在删除时重新生成列表。

即： -

function regenerateTagList(){
  var vals = $('.tags li.tag input').toArray().map(function(v, i) { return v.value; });
  $('.tags li.tag').remove();
  $('ul.tags').data('index', 0);
  for(var i = 0; i < vals.length; i++){
      addTagForm($('ul.tags'), $newLinkLi);
      $('.tags li.tag input:last').val(vals[i]);
  }
}

为标记的li添加一个类，以便您可以从添加链接中选择它们： -

var $newFormLi = $('<li></li>', { class:"tag" }).append(newForm);

然后在删除后调用： -

$('.remove-tag').click(function(e) {
    e.preventDefault();

    $(this).parent().remove();

    regenerateTagList();

    return false;
});

Working Fiddle

Answer 3

此修改将在不重新生成整个内容的情况下进行更改：

$('.remove-tag').click(function(e) {
    e.preventDefault();
    $(this).parent().remove();
    var count = 0;
    $('.tags li').each(function() {
        $(this).find('div label').first().text(count);
        count++;
    });
    return false;
});

找到所有li，然后在每个li中找到第一个标签并将其更改为count变量。如果第一个标签有一个名为'count'的类，可以简化它。

javascript计数器增量有点不对

3 个答案: