JS - Texte aléatoire affiché en double

[lenyren]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 28/04/2024
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous,

Je souhaiterai afficher sur mon forum un bloc dans lequel il y aurait le nom d'un personnage, et en dessous une citation du même personnage. Les citations seront actualisées à chaque rafraichissement de page.

Jusqu'ici, j'ai un code javascript qui fonctionne très bien, à un détail près : j'ai parfois 2 noms de personnages et leurs 2 citations qui apparaissent en même temps dans le bloc. Je souhaiterai qu'il n'y ai qu'un seul nom de personnage et une seule citation qui apparaissent à la fois.

Je suis une bille en codage, j'ai épluché de nombreux sujets mais je n'arrive pas à trouver un problème similaire au mien.

Ci-dessous mon code :

Code:

      <div class="unr-pjd flex aic acc">
                                                                                                                                            
         <div class="unr-rusn">
                                                                                                                                                <style type="text/css">
    .randomName span{display:none}
    .randomText span{display:none}
</style> <script type="text/javascript">
    jQuery(function(){
        // Stock l'Id aléatoire
        var id = 0;

        jQuery(".randomText").each(function(){
            // Calcul l'id aléatoire
            id = Math.floor(Math.random()*jQuery(this).find("span").length)

            // Affiche le texte sous l'id calculé
            jQuery(this).find("span:eq("+id+")").css("display","inline");

            // Affiche le nom derrière l'id aléatoire
            jQuery(".randomName").find("span:eq("+id+")").css("display","inline");
        });
    });
</script> <span class="randomName">    <span>name 1</span>    <span>name 2 </span>    <span>name 3</span></span>             
         </div>
                                           <span class="datos"><span class="randomText">    <span>blabla 1</span>    <span>blabla 2 </span>    <span>blabla 3</span></span>  </span>   
      </div>

Et le CSS qui lui est lié :

Code:

/* - Pj. destacado || Featured character and search - */
.unr-pjd { border: var(--unreal-border); height: 71px; margin-bottom: 10px; padding: 10px; position: relative; overflow: hidden; width: 100%; }
.unr-rusn { color: var(--unreal-c1); font: 800 16px var(--unreal-font1); letter-spacing: 1px; text-transform: uppercase; margin-right: 15px; flex-grow: 1; position: relative; width: 233px; }
span.datos { border-top: var(--unreal-border); color: var(--unreal-text); display: block; font: 400 9px var(--unreal-font2); padding: 3px 2px; width: 100%; }

Merci par avance pour votre aide !

Belle journée

[lenyren]

Rebonjour,
Bon c'est définitivement moi qui ne sait pas me servir de Javascript. Il fallait seulement que je place mon code JS tout à la fin du code...

Désolée et merci ! Sujet résolu