比較我的數組作品，直到數組中有多個值

Question

我試圖將多個值的數組傳遞給函數，該函數將檢查值是否存在於div列表中，如果是，則用紅色背景。

我的代碼工作時，我傳遞一個任意字符串作爲參數，它有效，當我有一個數組只有一個值。然而，一旦我的陣列有兩個或更多的值，它似乎打破了，並沒有在控制檯中的信息來暗示我。

我相信問題是與我如何編寫比較函數，但它可以還與我如何通過陣列說謊。

var postList = document.getElementsByClassName("post"); 
 
var userList = new Array(); 
 

 
//compares the user's keyword entries to the text in the divs, and marks "matching" divs with a red background 
 
function listComparison(collection, searchText) { 
 
    for (var i = 0; i < collection.length; i++) { 
 
     if (collection[i].innerText.toLowerCase().indexOf(searchText) > -1) { 
 
      collection[i].style.backgroundColor = "red"; 
 
     } 
 
    } 
 
} 
 

 
//adds user entries to an array on click and clears out the textarea 
 
document.getElementById("save").addEventListener("click", function() { 
 
    var listEntry = document.getElementById("listEntries").value; 
 
    userList.push(listEntry); 
 
    document.getElementById("listEntries").value = ""; 
 
    console.log(userList); 
 
}) 
 

 
//event listener for the button that runs the collectionContains function above 
 
document.getElementById("run").addEventListener("click", function() { 
 
    listComparison(postList, userList); 
 
});

div { 
 
    background: #d0dbe6; 
 
    margin: 5px; 
 
    width: 50%; 
 
} 
 

 
#list { 
 
    width: 300px; 
 
    height: 100px; 
 
}

<textarea placeholder="Enter words here one at a time and click 'Add to Filter'" id="listEntries"></textarea> 
 
<br> 
 
<button id="save" for="listEntries">Add to Filter</button> 
 
<button id="run">Run Filter</button> 
 

 
<div class="post">religion</div> 
 
<div class="post">cats</div> 
 
<div class="post">hotdogs</div> 
 
<div class="post">babies</div> 
 
<div class="post">test me please</div> 
 
<div class="post">filler</div> 
 
<div class="post">lorem ipsum</div> 
 
<div class="post">your mom</div> 
 
<div class="post">religion again</div> 
 
<div class="post">build a wall</div> 
 
<div class="post">no it's becky</div> 
 
<div class="post">anything with religions in it is screwed!</div>

Answer 1

的問題在於，你傳遞一個數組String#indexOf()（如collection[i].innerText.toLowerCase().indexOf(searchText)）的事實。該函數需要一個字符串作爲搜索項，而不是數組。

發生什麼事是你的數組正在轉換成一個字符串。當你的數組只包含一個字符串而沒有其他元素時，它的工作原理是因爲它的字符串表示形式是同一個字符串。但是，當數組包含多個元素時，其字符串表示形式就是所有這些字符串的逗號分隔列表，並且這不會進行正確的比較。

您將需要循環訪問數組，以便在數組中爲每個字符串搜索集合中的項目（我已將參數重命名爲使其清楚地表明您正在傳遞數組）：

var postList = document.getElementsByClassName("post"); 
 
var userList = new Array(); 
 

 
//compares the user's keyword entries to the text in the divs, and marks "matching" divs with a red background 
 
function listComparison(collection, searchList) { 
 
    for (var i = 0; i < searchList.length; i++) { 
 
     for (var j = 0; j < collection.length; j++) { 
 
      if (collection[j].innerText.toLowerCase().indexOf(searchList[i]) > -1) { 
 
       collection[j].style.backgroundColor = "red"; 
 
      } 
 
     } 
 
    } 
 
} 
 

 
//adds user entries to an array on click and clears out the textarea 
 
document.getElementById("save").addEventListener("click", function() { 
 
    var listEntry = document.getElementById("listEntries").value; 
 
    userList.push(listEntry); 
 
    document.getElementById("listEntries").value = ""; 
 
    console.log(userList); 
 
}) 
 

 
//event listener for the button that runs the collectionContains function above 
 
document.getElementById("run").addEventListener("click", function() { 
 
    listComparison(postList, userList); 
 
});

div { 
 
    background: #d0dbe6; 
 
    margin: 5px; 
 
    width: 50%; 
 
} 
 

 
#list { 
 
    width: 300px; 
 
    height: 100px; 
 
}

<textarea placeholder="Enter words here one at a time and click 'Add to Filter'" id="listEntries"></textarea> 
 
<br> 
 
<button id="save" for="listEntries">Add to Filter</button> 
 
<button id="run">Run Filter</button> 
 

 
<div class="post">religion</div> 
 
<div class="post">cats</div> 
 
<div class="post">hotdogs</div> 
 
<div class="post">babies</div> 
 
<div class="post">test me please</div> 
 
<div class="post">filler</div> 
 
<div class="post">lorem ipsum</div> 
 
<div class="post">your mom</div> 
 
<div class="post">religion again</div> 
 
<div class="post">build a wall</div> 
 
<div class="post">no it's becky</div> 
 
<div class="post">anything with religions in it is screwed!</div>

Answer 2

var userList = new Array(); 
 

 
//compares the user's keyword entries to the text in the divs, and marks "matching" divs with a red background 
 
function listComparison(collection, searchText) { 
 
    collection.filter(function(elem) { 
 
    return !!searchText.filter(function(text) { 
 
     return elem.innerText.toLowerCase().indexOf(text) > -1; 
 
    }).length; 
 
    }).forEach(function(elem) { 
 
    elem.style.backgroundColor = "red"; 
 
    }); 
 
} 
 

 
//adds user entries to an array on click and clears out the textarea 
 
document.getElementById("save").addEventListener("click", function() { 
 
    var listEntry = document.getElementById("listEntries"); 
 
    userList.push(listEntry.value); 
 
    listEntry.value = ""; 
 
    console.log(userList); 
 
}) 
 

 
//event listener for the button that runs the collectionContains function above 
 
document.getElementById("run").addEventListener("click", function() { 
 
    var collection = Array.prototype.slice.call(document.getElementsByClassName("post")); 
 
    listComparison(collection, userList); 
 
});

div { 
 
    background: #d0dbe6; 
 
    margin: 5px; 
 
    width: 50%; 
 
} 
 
#list { 
 
    width: 300px; 
 
    height: 100px; 
 
}

<textarea placeholder="Enter words here one at a time and click 'Add to Filter'" id="listEntries"></textarea> 
 
<br> 
 
<button id="save" for="listEntries">Add to Filter</button> 
 
<button id="run">Run Filter</button> 
 

 
<div class="post">religion</div> 
 
<div class="post">cats</div> 
 
<div class="post">hotdogs</div> 
 
<div class="post">babies</div> 
 
<div class="post">test me please</div> 
 
<div class="post">filler</div> 
 
<div class="post">lorem ipsum</div> 
 
<div class="post">your mom</div> 
 
<div class="post">religion again</div> 
 
<div class="post">build a wall</div> 
 
<div class="post">no it's becky</div> 
 
<div class="post">anything with religions in it is screwed!</div>