javascript 计数器增量有点错误

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

因为您有很多 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 中添加 class，这样您就可以 select 它们来自添加 link:-

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

删除后再调用:-

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

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

    regenerateTagList();

    return false;
});

Working Fiddle

Answer 2

主要问题在于如何计算元素。
创建新标签时，您更新数据上的数量，但删除时不会注意到。
您有两个选择：

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

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

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

这意味着类似于 "Look on dom for ul.tag, and if a click event is triggered on a .remove-tag do this" 所以它对创建的新标签保持活动状态。

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

的 class，它可以被简化

javascript 计数器增量有点错误

javascript counter increment is a bit wrong

javascript

jquery

symfony-forms

symfony