Question

我刚开始学习html，javascript和CSS，所以我只懂基础知识。对于我正在处理的这个类项目，我们必须创建可以根据数组中的字符串是否包含某个字母来过滤掉数组内容的复选框。如果它们确实包含该字母，则它们将从阵列中删除。我的原始数组是一个名为words

的数组

在我的.html文件中，我有以下内容：

<form> 
<label> <input type="checkbox" id="A" onchange= "exclude()" /> Exclude words with 'A' <br /> </label>
            <label> <input type="checkbox" id="I" onchange= "exclude()" /> Exclude words with 'I' <br /> </label>
            <label> <input type="checkbox" id="O" onchange= "exclude()" /> Exclude words with 'O' <br /> </label>

在我的.js文件中我有：

function exclude() {
    if (A.checked) {
        filterByLetter(words, "A")
    }
    if (I.checked) {
        filterByLetter(words, "I")
    }
    if (O.checked) {
        filterByLetter(words, "O")
    }
}

function filterByLetter(originalList, letter) {
    var newList = [];
    for (var i = 0; i < originalList.length; i++){
        if (originalList[i].indexOf(letter) == -1) {
            newList.push(originalList[i]);
            
        }
    }
    
    par.innerHTML = newList;
    
}

当我运行此代码时，它可以工作，但是，当我选中多个复选框时，只有最新的复选框才有效。我怎样才能使一次检查多个复选框将过滤掉所有字母的字符串？我将如何做到这一点，如果我取消选中最后的方框，那么这些字母不会过滤数组？感谢!!!

Answer 1

您的filterByLetter函数应返回如下所示的已过滤列表：

function filterByLetter(originalList, letter) {
    var newList = [];
    for (var i = 0; i < originalList.length; i++){
        if (originalList[i].indexOf(letter) == -1) {
            newList.push(originalList[i]);
        }
    }
    return newList;  
}

如果你的函数只做一件事，几乎总是更好，在这种情况下过滤但不更新HTML。现在您可以多次应用它：

function exclude() {
    var filteredList = words.concat([]); // create a copy
    if (A.checked) {
        filteredList = filterByLetter(filteredList , "A")
    }
    if (I.checked) {
        filteredList = filterByLetter(filteredList , "I")
    }
    if (O.checked) {
        filteredList = filterByLetter(filteredList , "O")
    }

    par.innerHTML = filteredList;
}

加分：为了更现代的功能风格，您可以像这样编写filterByLetter函数：

function filterByLetter(originalList, letter) {
    return originalList.filter(function(x) {
        return x.indexOf(letter) == -1;
    });
}

需要有关创建筛选数组内容的复选框的帮助

1 个答案: