Question

我试图将多个值的数组传递给一个函数，该函数将检查这些值是否存在于div列表中，如果存在，则用红色背景标记它们。

当我将任意字符串作为参数传递时，我的代码有效，并且当我有一个只有一个值的数组时它可以工作。但是，一旦我的数组中有两个或多个值，它似乎就会中断，并且控制台中没有任何信息可以让我知道。

我认为问题在于我如何编写比较函数，但它也可能在于我如何传递数组。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

问题在于您将数组传递给String#indexOf()（如collection[i].innerText.toLowerCase().indexOf(searchText)中所述）。该函数需要一个字符串作为搜索项，而不是一个数组。

发生的事情是您的数组正在转换为字符串。当您的数组只包含一个字符串而没有其他元素时，它的工作原理是因为它的字符串表示形式是相同的字符串。但是，当您的数组包含多个元素时，其字符串表示形式是所有这些字符串的逗号分隔列表，并且不能正确比较。

您需要循环遍历数组，以便在集合中搜索数组中的每个字符串中的项目（我已重命名该参数以清楚地表明您正在传递数组）：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

比较我的数组，直到数组中有多个值

2 个答案: