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的標記，以便您可以從添加鏈接選擇它們： -

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)

採取數量上的每個創作

1. 更新，而不是把它放在document ready

我注意到有刪除的另一個問題。當您創建每個元素時，您將在DOM中的每個.remove-tag附加一個刪除事件，在第3次創建時，第一個元素將附加3個事件，以及第二個元素。 兩免一，我會做這樣的事情：

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

它的意思是像「看對DOM的ul.tag，如果點擊事件被觸發上卸下襬臂 - 標籤做到這一點「，因此它爲創建的新標籤保持活躍和活躍。

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

它找到的所有立的，然後發現在每個L1的第一個標籤，並將其更改爲計數變量。如果第一個標籤有一個叫做「count」的類，它可以被簡化。