需要幫助創建過濾數組內容的複選框

Question

我剛開始學習html，javascript和CSS，所以我只理解基礎知識。對於我正在處理的這個類項目，我們必須創建複選框，以便根據數組中的字符串是否包含某個字母來過濾出數組的內容。如果它們包含該字母，它們將從數組中移除。 我原來的陣列是所謂的話

在我的.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; 
    }); 
}