Discussion :

[pinpinsql]

Bonjour à tous,

Petite question, j'ai le bloc HTML suivant :

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="DataViewer-details card"><img alt="" src="#[FIELD('Image')]#" style="width: 120px; height: 120px; text-align:center; margin: 10px 0 10px 0;" class="fr-draggable">
    <h5><a class="title card-titre" id="pop" title="#[FIELD('Service')]#"><strong><span style="font-size: 18px;">SERVICE</span></strong></a></h5>
    <h4>
        <div class="bouton" id="wkf" style="display:bloc=k;"><a modaltitle="" pagepopup="61024f9b06f02"><button style="font-size:14px;border-radius:0px;">demander</button></a></div>
        <div class="bouton" id="wkf0" style="display:none;"><a modaltitle="" pagepopup="61024f9b06f01"><button style="font-size:14px;border-radius:0px;">demander</button></a></div>
	<div class="dsu" id="restriction" style="display:none;">Champs libre 5</div>	
    </h4>
 
</div>

Ce que je souhaite faire :
si mon champs libre 5 = 'SDAI' alors cache le bouton de l'id "wkf" et affiche le bouton de l'id = "wkf0"

J'ai fait ce premier script

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">      valeur = document.getElementById("restriction").innerText;
 
        if (valeur == "SDAI")
        {
            console.log("VAL : " + valeur);
            document.getElementById("wkf").style.display = "none";
            document.getElementById("wkf0").style.display = "block";
        };
 
    </script>

Çà marche bien sauf si je souhaite faire un affichage par tuile(ou vignette), en effet il trouvera mon ID restriction un fois mais pas plus, ce qui semble logique.

Donc je m'oriente vers une recherche par class, mais la je sèche

Code :

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

1
2
3
4
<script type="text/javascript">
    valeur = document.getElementsByClassName("dsu");
    console.log(valeur);
</script>

Voici mon inspecteur :


Ma question, comment avancer dans chaque collection pour vérifier si mon innertext= "SDAI" et afficher le bouton en conséquence

Merci

[melka one]

jour

utilise une boucle

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
 
    valeur = document.getElementsByClassName("dsu");
 
for (var i=0 ; i<valeur.length ; i++){
 
    console.log(valeur[i].innerText);
 
}
</script>

[pinpinsql]

Hello,

J'avais déjà essayé ça (j'aurais du le préciser, sorry).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
 
	valeur = document.getElementsByClassName("dsu");
    for (var i = 0; i < valeur.length; i++)
    {
 
        console.log(valeur[i].innerText);
        if ((valeur[i].innerText) == "SDAI")
        {
            document.getElementById("wkf").style.display = "none";
            document.getElementById("wkf0").style.display = "block";
        };
    }
 
</script>

Voici le résultat que j'ai du mal à comprendre :



Il me change le premier bouton, alors que la valeur qui déclenche le changement n'existe pas sur cette vignette.

[pinpinsql]

Hello,

Du coup, je me suis dit qu'en partant d'une class parent et en me baladant dans l'arbo je trouverais un autre résultat mais non, il continu de me recopier cette donner que je ne comprends pas.

J'en suis arrivé à mettre mon déclencheur dans une même classe,

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="DataViewer-details card"><img alt="" src="#[FIELD('Image')]#" style="width: 120px; height: 120px; text-align:center; margin: 10px 0 10px 0;" class="fr-draggable">
    <h5><a class="title card-titre" id="pop" title="#[FIELD('Service')]#"><strong><span style="font-size: 18px;">SERVICE</span></strong></a></h5>
    <h4>
        <div class="bouton" id="wkf" style="display:bloc=k;"><a modaltitle="" pagepopup="61024f9b06f02"><button style="font-size:14px;border-radius:0px;">demander</button></a></div>
        <div class="bouton" id="wkf0" style="display:none;"><a modaltitle="" pagepopup="61024f9b06f01"><button style="font-size:14px;border-radius:0px;">demander</button></a></div>
	<div class="title card-titre" id="restriction" style="display:none;">Champs libre 5</div>	
    </h4>
 
</div>

Code :

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
<script type="text/javascript">
    valeur = document.getElementsByClassName("title card-titre");
 
 
    for (var i = 0; i < valeur.length; i++)
    {
        console.log(valeur[i].innerText);
 
        if ((valeur[i].innerText) == "SDAI")
        {
            document.getElementById("wkf").style.display = "none";
            document.getElementById("wkf0").style.display = "block";
        };
    }
 
</script>

Voici mon résultat :

En gros :
- a chaque vignette, il repart de la première
- Il voit bien ma chaine de caractère qui doit déclencher ma condition.
- Mais encore une fois, ma condition n'est appliquée que sur la première vignette

Des idées ?

Bonne après midi.

[jreaux62]

Bonjour,

id="pop", id="wkf", id="wkf0",...

Un attribut id DOIT ÊTRE UNIQUE.

Donc, si tu as PLUSIEURS "cards", tu ne peux pas utiliser les mêmes.
C'est ce qui explique pourquoi le script ne considère que ceux de la 1ère "card"..