1

我设置了循环通过复选框并在手风琴菜单顶部创建结果列表的代码。当您单击每个术语旁边的 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());
}

该代码处理字符串的创建和标点符号的放置以格式化列表。除非我注释掉我的子子代码，否则下面的代码是我做的一切都会抛出错误的混搭。

$("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/

4

2 回答 2

0 
subsub = categoryString.substring(0,1);
$(subsub).remove();

substring 返回一个字符串，$(X).remove()需要一个选择器......如果 subsub 包含一个 id do

$('#'+subsub).remove();

或类字符串

$('.'+subsub).remove();

[编辑] 实际上....substring(0,1) 返回一个字符....是这样的意思吗？

于 2013-08-14T15:17:13.877 回答
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()，因为尚未支持。

编辑：更改它，以便添加过滤器和删除过滤器重用相同的功能来填充列表。

于 2013-08-14T17:42:30.913 回答