DOM.style.display未按预期工作。无法隐藏 div

Question

我正在尝试使用Fuse.js.实现一个搜索栏

const fuse = new Fuse(rows, searchOptions);
let searchResults = fuse.search(e);
console.log(searchResults);
if (searchResults.length > 0) {
rows.forEach(function (item, index) {
item.style.display = "none";
searchResults.forEach(function (searchHit, hitIndex) {
if (searchHit.item == item)
item.style.display = "flex";
});
});
}

当代码运行时，不会发生任何可见的事情。如果我用item.style.color替换item.style.display并尝试更改颜色，它会识别正确的卡片并正确地为其上色。

我试着添加了"！"重要"；，但结果保持不变。我也尝试过$(item(.hide((，但没有成功。

Answer 1

您的代码看起来不错。我认为您的问题可能与if声明有关。请稍后尝试添加else，因为if语句中的代码将仅在该条件下运行。尝试为测试添加alert()。当我的代码没有按预期运行时，我要做三件事：

1. 我仔细检查我的代码并检查语法错误
2. 我检查控制台，看看是否有我可能错过的错误
3. 我在代码的某些部分后面添加console.log(1)或alert(1)，看看该代码是否能够运行

Answer 2

建议如下：

if (searchResults.length) {
rows.forEach(function (item) {
if (searchResult.indexOf(item.textContent) >= 0) {
item.style.display = "flex";
} else {
item.style.display = "none";
}
});
}

这将迭代每一行，并查看item是否在searchResults数组中。这假设item是将在阵列中的元素。

根据您的代码，我怀疑rows是一些HTML元素的集合。当将该元素编译为searchResults时，您将希望获得该元素的textContent，假设它们是String。

Answer 3

成功了！非常感谢。

我仍然不确定出了什么问题，但使用Bootstrap隐藏div"d-none"；上课很成功。

if (searchResults.length > 0) {
rows.forEach(function(item){
item.classList.remove("d-flex");
item.classList.add("d-none");
searchResults.forEach(function (searchHit){
if(searchHit.item == item){
item.classList.remove("d-none");
item.classList.add("d-flex");
}
});
});
}