Question

我正在制作一个包含复选框和值的下拉列表。当我选中一个复选框时，该特定项目的id将附加到右侧面板上的输入中，该项目的值将以右侧面板上的标签形式附加。当我再次单击选中的复选框时，必须删除附加值和右侧的标记。

我面临的问题是我取消选中的复选框没有删除，而是删除了其他一些附加的附加值。

使用Javascript：

var arr = [];
$(".taglistarea input[type='text']").click(function(){
    if(!$(this).parent("div").next(".taglist").is(":visible")) {
        $(this).parent("div").next(".taglist").slideDown();
    } else {
        $(this).parent("div").next(".taglist").slideUp();
    }
});

$(".taglist ul li a input[type='checkbox']").click(function(){
    var tagidall = $(".taglist ul li a").attr("id");

    var tagideach = $(this).parent("a").attr("id");
    var tagtexteach = $(this).text();

    arr.push(tagideach);

    if($(this).is(":checked")) {
        $(this).addClass("active");
        $(".ss").append('<a href="#" id="'+tagideach+'" class="tagss">International<span class="closetag"></span></a>');    
    } else {
        $(".ss a[id="+tagideach+"]").remove();
        //arr.splice(tagideach,1);
    }
    //alert(arr);
    $("#idvals").val(arr.toString());
});

我认为问题出在这里：

arr.splice(tagideach,1);

完整的小提琴在这里： https://jsfiddle.net/kue83ud8/

感谢。

Answer 1

如你所说，问题在于arr.splice(tagideach,1);

splice的第一个参数是要移除的索引，而不是对象

您应该将该行替换为arr.splice(arr.indexOf(tagideach),1);（您还应该检查indexOf是否返回-1以外的值

另一个评论

您应该缓存选择器以提高性能：

if(!$(this).parent("div").next(".taglist").is(":visible")) {
    $(this).parent("div").next(".taglist").slideDown();
} else {
    $(this).parent("div").next(".taglist").slideUp();
}

应该成为：

var element = $(this).parent("div").next(".taglist");
if(!element.is(":visible")) {
    element.slideDown();
} else {
    element.slideUp();
}

而不是检查元素是否可见，您可以使用slideToggle()

另外，您应该阅读jQuery中的事件委派

Answer 2

设置要从数组中删除的元素索引

arr.splice(arr.indexOf(tagideach),1);

从数组中删除值

2 个答案: