我有一个代码,当我点击它们时,我可以通过隐藏的形式将某些" absentees"以及他们的ID添加到缺席列表中。当我再次点击它时,"缺席者"从缺席列表中删除。但是,当我再次点击它时,列表似乎因为br而进一步扩展 在我的代码加上隐藏的表单值似乎没有被删除。我需要删除隐藏值,以便从列表中删除的缺席者不会记录在数据库中。我需要br 这样缺席的名单就会出现。
这是我的代码:http://jsfiddle.net/gk5pV/8/
答案 0 :(得分:1)
我完全同意@charlietfl,只使用块级元素。此外,使用单个隐藏输入来跟踪您的缺席者。 Example fiddle,代码如下:
$(function() {
$("td").click(function() {
var $this = $(this);
var user = $this.attr('id');
var p = $('<p />').attr('user', user).text($this.text());
var absentees = [];
if ($('#absentees').val().length > 0) {
absentees = $('#absentees').val().split(',')
}
if ($(this).hasClass('on')) {
//console.log("Already marked absent");
//remove from collection
$("#collect").children('p[user="' + user + '"]').remove();
absentees.splice(absentees.indexOf(user), 1);
}
else {
//console.log(user);
//add to collection
$("#collect").append(p);
absentees.push(user);
}
$this.toggleClass('on');
$('#absentees').val(absentees.join(','));
});
$("#clicky").click(function() {
$('td').removeClass('on');
$("#collect").empty();
$('#absentees').val('');
});
});
答案 1 :(得分:0)
解决方案非常简单。将要追加的文本和隐藏的输入包装在块级元素(div,p,li等)中,您将不需要<br
标记。如果从列表中删除缺席者,则删除块元素,输入将成为其中的一部分,因此它将不再存在。如果为新的块级元素提供类名,则只需将事件处理程序附加到类