我有以下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="<div><label class=" required">__name__</label><div id="task_tags___name__"><div><label for="task_tags___name___name" class=" required">Name</label><input type="text" id="task_tags___name___name" name="task[tags][__name__][name]" required="required" maxlength="255" /></div></div></div>">
</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;
});
}
答案 0 :(得分:2)
主要问题在于你如何计算元素
创建新标记时,您可以更新数据的数量,但删除时不会注意到它
您有两种选择:
$collectionHolder.data('index', index - 1)
document ready
我注意到删除的另一个问题。当您创建每个元素时,您将向DOM中的每个.remove-tag
附加一个删除事件,在第三个创建时,第一个元素将附加3个事件,第二个元素将附加两个。
两个避免我做的事情:
$('ul.tags').on('click','.remove-tag',function(e){
e.preventDefault();
$(this).parent().remove();
})
&#13;
这意味着&#34;在dom上查找ul.tag,如果在.remove-tag上触发了click事件,请执行此操作&#34;所以它对于创建的新标签保持活跃和活跃。
答案 1 :(得分: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;
});
答案 2 :(得分:1)
此修改将在不重新生成整个内容的情况下进行更改:
$('.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'的类,可以简化它。