Question

我有一个表单事件，它接受输入的值并使用以下内容构造一个数组：

    keywordArray = []    
    var getVal = $('#search').val();
    if(getVal.length > 1){
        keywordArray.push(getVal);
        $('.test').on('click', function(){
            removeTag(this, getVal);
        });
        $('#search').val("");
    }

我的删除功能如下所示：

    function removeTag(el, getVal){
        var index = keywordArray.indexOf(getVal);
        keywordArray.splice(index, 1);
    }

当索引同步时第一次删除值时没有问题，但是一旦删除了值，索引就会改变，似乎JS不会与更新的索引保持同步，所以当我删除另一个值时，它会在拼接上产生-1，并将删除所有值。

Answer 1

@vijayP在评论中指出了主要问题。这是第一个可能的解决方案。

添加代码时，请使用data属性将代码与移除按钮（el）相关联：

function addTag(el, value) {
    $(el).data('value', value).on('click', removeTag);
}

我假设你为每个标签都有一个单独的删除按钮。然后，单击处理函数可以如下所示（检查正确的索引）：

function removeTag(){
    var index = keywordArray.indexOf($(this).data('value'));
    if (index > -1) keywordArray.splice(index, 1);
}

Answer 2

我看到两个问题：你的removeTag函数及其调用方式。

首先，removeTag()不需要该元素，因此如果确实不需要，请删除el参数。其次，当数组中没有出现给定字符串时，它应该什么都不做：

function removeTag(val){
    var index = keywordArray.indexOf(val);
    if (index >= 0) keywordArray.splice(index, 1);
}

第二个问题可能与您的代码的这一部分有关：

$('.test').on('click', function(){
    removeTag(this, getVal);
});

我怀疑您不想为所有'.test'元素注册点击处理程序，因为您在下一行中引用this但this未在{removeTag中使用1}}函数（见上文）。如果有多个'.test'元素，则应确保仅使用与所单击的removeTag()元素对应的值调用'.test'。目前，您每次点击都会多次致电removeTag() - 每个'.test'元素一次。

改变阵列导致与接头的毛刺

2 个答案: