我的代码设置循环显示复选框,并在手风琴菜单的顶部创建结果列表。当您单击每个术语旁边的X时,他们会自行删除并取消选中与其关联的框。但是,当删除标记时,列表开头的分隔逗号和冒号仍然存在。我有一个沉重的处理方式,但我觉得它可以更清洁,更快,但我想出的解决方案一直给我语法错误。
var divBlock = $(this).closest("h3 + div"); //finds parent h3 + div
aObject = divBlock.prev().find("a:first"); //gets the a link in the h3
originaltitle = aObject.html();
var liItems = divBlock.find("li");
for (var i = 0; i < liItems.length; i++) {
if (liItems[i].childNodes[0].checked) {
var searchterm = liItems[i].childNodes[1].innerHTML;
categoryString += "<div class='choice'>" + searchterm + "<a href=\"javascript:void(0);\" class=\"delete_search_term\" id=\"close_" + searchterm.replace(/\s/g, "-") + "\">(x)</a>,</div> ";
}
}
if (originaltitle.indexOf(": ") > 0) {
originaltitle = originaltitle.substring(0, originaltitle.indexOf(":"));
}
if (categoryString.length > 0) {
categoryString = categoryString.substring(0, categoryString.lastIndexOf(",")) + "</div>";
aObject.html(originaltitle + ": " + categoryString);
} else {
aObject.html(originaltitle.replace(":", "").trim());
}
该代码处理字符串的创建和标点符号的放置以格式化列表。除非我注释掉我的子代码,否则下面的代码是我做的所有mish-mash,它会抛出错误。
$("a.delete_search_term").click(function () {
window.location = $(this).attr('href');
var itemName = this.id.replace("close_", "").toLowerCase();
var liItems = $(this).closest("h3").next().find("li");
for (var i = 0; i < liItems.length; i++) {
if (liItems[i].childNodes[0].id == itemName) {
liItems[i].childNodes[0].checked = false;
}
}
if (categoryString.length > 0) {
categoryString = categoryString.substring(categoryString.lastIndexOf(","));
subsub = categoryString.substring(0, 1);
$(subsub).remove();
}
$(this).parent().remove(); //Removes parent of selected object only
return false;
});
按要求创建了一个JSFiddle:http://jsfiddle.net/w4AxR/1/
答案 0 :(得分:0)
subsub = categoryString.substring(0,1);
$(subsub).remove();
substring返回一个字符串,$(X).remove()
需要一个选择器......如果subsub包含一个id do
$('#'+subsub).remove();
或类字符串
$('.'+subsub).remove();
[EDIT]实际上.... substring(0,1)返回一个char ....是不是就是这样?
答案 1 :(得分:0)
我分叉你的小提琴并修改了代码。通过在用户选择的输入上使用类,可以简化该过程。
我没有尝试在更改中操纵H3中的列表,而是让代码简单地管理输入上的类,并在每次更改时重建列表。
代码变得更加简单:
var updateChoices = function () {
var container = $(".acat1");
container.text('Food Categories: ');
$('li.selected input').each(function () {
var searchterm = $(this).next().text();
var element = $('<div />').addClass('choice').text(searchterm).append(
$('<a />').addClass('delete-search-term').attr('id', 'remove_' + this.id ).text('(x),')
);
container.append(element);
});
var lastChoice = container.find('.choice:last');
lastChoice.html(lastChoice.html().replace(",", ""));
}
$('.check').click(function () {
if (this.checked) $(this).parent().addClass('selected');
else $(this).parent().removeClass('selected');
updateChoices();
});
$("a.delete-search-term").live('click', function () {
$('#' + this.id.replace('remove_', '') )
.attr('checked', false)
.parent().removeClass('selected');
updateChoices();
return false;
});
完整示例:jsfiddle
目前,您提供的jsfiddle仅使用jquery 1.6.4,不确定这是否是故意的。如果是这样,可能需要考虑升级.on()
对事件绑定的支持。我使用了.live()
,因为尚未支持。
编辑:对其进行了更改,因此添加过滤器并移除过滤器会重复使用相同的功能来填充列表。