Discussion :

[Olivier59260]

Bonsoir!

Je pars d'une fonction qui tourne bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function cacher2() {
var 
div2 = document.getElementsByClassName("test");
for(var i=0;i<div2.length;i++) 
  {
    div2[i].style.display='none';
  }
 };

Toutes les div correspondantes sont bien masquées.

Mais j'aurais besoin d'en afficher certaines selon leur contenu, du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
  if (div2.innerHTML="HELLO") 
  {
    div2.style.display='block';
  };

Je n'arrive pas à compiler les deux...

[danielhagnoul]

Pour :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="test">
  <p>Bonjour</p>
</div>
 
<div class="test">
  <p>Bonjour = Hello</p>
</div>
 
<div class="test">
  <p>Hello = Bonjour</p>
</div>
 
<div class="test">
  <p>Hello</p>
</div>

Exemple avec textContent :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function cacher2( str ){
    var
      div2 = document.getElementsByClassName( "test" ),
      elem;
 
    for ( var i = 0; i < div2.length; i++ ){
      elem = div2[i];
 
      if ( elem.textContent.trim() != str ){
        elem.style.display = 'none';
      }
    }
  }
 
  setTimeout( function(){
    cacher2( 'Bonjour = Hello' );
  }, 3000 );

[Olivier59260]

Ok merci, ça marche...
En revanche, n'étant pas du métier et novice en javascript, pour pouvoir l'adapter j'aurais voulu comprendre le rôle de ces codes dans la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
      if ( elem.textContent.trim() != str ){
        elem.style.display = 'none';

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 function(){
    cacher2( 'Bonjour = Hello' );
  }

[danielhagnoul]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="test">
  <p>Bonjour</p>
</div>
 
<div class="test">
  <p>Bonjour = Hello</p>
</div>
 
<div class="test">
  <p>Hello = Bonjour</p>
</div>
 
<div class="test">
  <p>Hello</p>
</div>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

cacher2( 'Bonjour = Hello' );

Appel la fonction cacher2() avec en paramètre le texte qui doit rester visible, par exemple : "Hello".

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
elem = div2[i];
 
      if ( elem.textContent.trim() != str ){
        elem.style.display = 'none';
      }

Traite le texte contenu dans l'élément du DOM, ici elem est div2[i].
Le texte, elem.textContent, doit être débarrassé des espaces inutiles (avant et après le texte) en utilisant la méthode trim(), ce qui donne : elem.textContent.trim().
Si le texte de l'élément du DOM est différent (!=) de celui (str) qui doit rester visible, on le cache.

[Olivier59260]

Eureka, je vois effectivement mieux... Merci encore !

Une question subsidiaire : puis-je attribuer à str une variable, récupérée par l'ID d'un autre élément texte ? Ca ne rime à rien en code je pense, mais quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 var  str = document.getElementById('monchamp').textContent;

??

[danielhagnoul]

Oui !

Le code est bon !

Doc sur textContent : https://developer.mozilla.org/fr/doc...de/textContent

[Olivier59260]

Je ne sais pas ce que j'ai boutiqué hier soir, mais effectivement ça marche...

En tout cas c'est du script qui me tire une grosse épine du pied, c'est super !