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是一個將在 Array 中的元素。

根據您的代碼，我懷疑rows是一些 HTML 元素的集合。 假設它們是字符串，則在將其壓縮到searchResults時，您將需要獲取該textContent 。

Answer 3

搞定了！ 謝謝！

我仍然不確定出了什么問題，但是使用 Bootstrap“d-none”類隱藏 div 起作用了。

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