Réduction d'un code Javascript trop long...
Bonjour,
Étant novice en JavaScript j'ai codé 6 fonctions. 3 d'entre elles exécutent le même code mais pour des blocs d'identifiants différents.
J'aimerai compacter ce code en deux fonctions cacher / révéler. Afin de ne pas avoir ce code-ci:
function cacher()
{
document.getElementById('promo_infos_here').style.display = 'none';
}
function reveler()
{
document.getElementById('promo_infos_here').style.display = 'block';
}
function cacherdeux()
{
document.getElementById('promo_infos_here_deux').style.display = 'none';
}
function revelerdeux()
{
document.getElementById('promo_infos_here_deux').style.display = 'block';
}
function cachertrois()
{
document.getElementById('promo_infos_here_trois').style.display = 'none';
}
function revelertrois()
{
document.getElementById('promo_infos_here_trois').style.display = 'block';
}
Pouvez-vous m'aider ou m'aiguiller vers une solution ?
Merci d'avance ;)
Étant novice en JavaScript j'ai codé 6 fonctions. 3 d'entre elles exécutent le même code mais pour des blocs d'identifiants différents.
J'aimerai compacter ce code en deux fonctions cacher / révéler. Afin de ne pas avoir ce code-ci:
function cacher()
{
document.getElementById('promo_infos_here').style.display = 'none';
}
function reveler()
{
document.getElementById('promo_infos_here').style.display = 'block';
}
function cacherdeux()
{
document.getElementById('promo_infos_here_deux').style.display = 'none';
}
function revelerdeux()
{
document.getElementById('promo_infos_here_deux').style.display = 'block';
}
function cachertrois()
{
document.getElementById('promo_infos_here_trois').style.display = 'none';
}
function revelertrois()
{
document.getElementById('promo_infos_here_trois').style.display = 'block';
}
Pouvez-vous m'aider ou m'aiguiller vers une solution ?
Merci d'avance ;)
18 réponses
-
function cacher(nb = '') { document.getElementById('promo_infos_here' + nb).style.display = 'none'; } function reveler(nb = '') { document.getElementById('promo_infos_here' + nb).style.display = 'block'; }Et quand tu appelles une fonction, il suffit de préciser ce qu'il y a après "promo_infos_here" :
cacher('_deux'); -
Tu as essayé(e) d'utiliser une librairie JavaScript : MoonTools - jQuery.
-
Non non. Je souhaite seulement simplifier le code...
-
Tu appelles tes blocs par le même nom.
Et dans ton code JS tu mets le nom de tes div.
?! -
Non car je veux qu'un seul bloc aparaisse/disparaisse à la fois. Je dois donner un nom différent à chaque bloc mais je peux leur donner une même classe si besoin est.
Je ne sais pas comment procéder avec JS -
Merci acion-f16, c'est exactement ce dont j'avais besoin.
Un grand merci ;) -
En fait...je n'ai pas bien saisi:
Dans mon html j'ai par exemple:
<span class="promo_infos_deux" onmouseover="cacher('_deux')" onmouseout="reveler('_deux')">
<span id="promo_infos_here_deux">
titre du contenu a cacher
</span>
<span class="promo_infos_detail_deux">
contenu à révéler..
</span>
</span>
C'est ainsi que je dois appeler les fonctions dans le HTML ? Et dans le JS que tu m'as donné, dois-je modifier quelque chose ?
Merci d'avance -
<span class="promo_infos_deux" onmouseover="cacher('_deux')" onmouseout="reveler('_deux')">texte</span> <span id="promo_infos_detail_deux"> contenu à révéler.. </span>Attentionx aux différences entre "id" et "class" -
Et je laisse le JS tel quel ?
Oui je sais bien pour les class et les ID t'inquiète pas ;) -
Oui, le JS est bon.
-
J'ai essayé avec ceci pour le JS :
function cacher(nb = '') {
document.getElementById('promo_infos_here' + nb).style.display = 'none';
}
function reveler(nb = '') {
document.getElementById('promo_infos_here' + nb).style.display = 'block';
}
Et ceci pour le HTML:
<span class="promo_infos_deux" onmouseover="cacher('_deux')" onmouseout="reveler('_deux')">texte</span>
<span id="promo_infos_detail_deux">
contenu à révéler..
</span>
Le contenu qui est ici "texte" dans le HTML ne disparaît pas au survol. -
C'est "promo_infos_here_deux" et pas "promo_infos_detail_deux".
Donc modifies le JS ou le (x)HTML.
Et le contenu à masquer/afficher ce n'est pas plutôt "contenu à révéler.." ? Je ne comprends pas ce que t'essaye de faire. -
Ceci est affiché par un hover :
<span id="promo_infos_detail_deux">
contenu à révéler..
</span>
Pas besoin de JS...mais...
le contenu à cacher/montrer par JS est celui dans:
<span class="promo_infos_deux" onmouseover="cacher('_deux')" onmouseout="reveler('_deux')">texte</span> -
En fait tu veux simplement un système de afficher/masquer avec des lignes et quand on clique sur une, un texte s'affiche en-dessous ?
-
Oui, une ligne s'affiche à la base. Au survol, elle disparaît pour laisser apparaître un second texte. Elle réapparait quand la zone n'est plus survolée.
Le texte de base doit etre caché/afficher en JS, le second texte apparaît simplement avec un système de hover :) -
Comme ça ? http://paste.pocoo.org/show/180477/
-
Non pas exactement.
Voici l'état de base d'affichage sur le site :
- texte d'accroche visible
- texte descriptif invisible
La personne survole le texte d'accroche et:
- texte d'accroche disparaît grâce au Js
- texte descriptif apparaît grâce au :hover dans le css
La personne retire la souris:
- texte d'accroche ré-apparaît grâce au Js
- texte descriptif à nouveau invisible grâce au :hover dans le css
Voilà ;)
-
-
Et bien ? Ce n'est pas ce que fait mon script ?
Par contre ce n'est pas faisable en CSS avec :hover -
Je te montre la page par message privé, tu comprendras mieux ^^
