0
votes

DOM.style.display ne fonctionne pas comme prévu. Impossible de cacher la div

J'essaie d'implémenter une barre de recherche en utilisant 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";
                    });
                });
            }

Lorsque le code est exécuté, rien de visible ne se produit. Si je remplace item.style.display par item.style.color et que j'essaie de changer la couleur, il identifie les bonnes cartes et les colore correctement.

J'ai essayé d'ajouter "! Important", mais le résultat reste le même. J'ai également essayé $ (item) .hide () dans une tentative futile.

javascript jquery html css dom

1 commentaires

stackoverflow.com/questions/5375449/...

3 Réponses :

1
votes

Votre code semble bon. Je pense que votre problème vient peut-être de la déclaration if . Essayez d'ajouter un else par la suite, car votre code dans l'instruction if ne s'exécutera que sur cette condition. Essayez d'ajouter une alert() pour un test. Lorsque mon code ne s'exécute pas comme prévu, j'ai trois choses à faire:

Je parcours mon code et vérifie les erreurs de syntaxe.
Je vérifie la console pour voir s'il y a des erreurs que j'aurais pu manquer.
J'ajoute console.log(1) ou alert(1) après certaines parties de mon code pour voir si ce code est même exécuté.

0 commentaires

1
votes

Suggérerait ce qui suit:

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

Cela itérera chaque ligne et verra si l' item est dans le tableau searchResults . Cela suppose que l' item est un élément qui serait dans le tableau.

D'après votre code, je soupçonne que les rows sont une collection d'éléments HTML. Vous voudrez obtenir le textContent de cet élément lorsque vous le comprenez avec les searchResults supposant qu'il s'agit de chaînes.

0 commentaires

0
votes

Ça marche! Merci!

Je ne suis toujours pas sûr de ce qui n'allait pas, mais cacher le div en utilisant la classe Bootstrap "d-none" fonctionnait.

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

0 commentaires