Réduction d'un code Javascript trop long...

Fermé

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 - 18 févr. 2010 à 20:12
Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 - 20 févr. 2010 à 23:56

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

A voir également:

Réduction d'un code Javascript trop long...
Pc long a demarrer - Guide
Code asci - Guide
Bon de reduction - Guide
Code puk bloqué - Guide
Code telephone oublié - Guide

18 réponses

Réponse 1 / 18

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
19 févr. 2010 à 10:42

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');

Réponse 2 / 18

LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
18 févr. 2010 à 21:00

Tu as essayé(e) d'utiliser une librairie JavaScript : MoonTools - jQuery.

Réponse 3 / 18

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 1
18 févr. 2010 à 22:41

Non non. Je souhaite seulement simplifier le code...

Réponse 4 / 18

LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
19 févr. 2010 à 00:43

Tu appelles tes blocs par le même nom.
Et dans ton code JS tu mets le nom de tes div.

?!

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 18

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 1
19 févr. 2010 à 10:34

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

Réponse 6 / 18

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 1
19 févr. 2010 à 10:43

Merci acion-f16, c'est exactement ce dont j'avais besoin.

Un grand merci ;)

Réponse 7 / 18

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 1
19 févr. 2010 à 11:01

En fait...je n'ai pas bien saisi:

Dans mon html j'ai par exemple:



titre du contenu a cacher


contenu à révéler..



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

Réponse 8 / 18

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
19 févr. 2010 à 11:20

<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"

Réponse 9 / 18

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 1
19 févr. 2010 à 11:43

Et je laisse le JS tel quel ?

Oui je sais bien pour les class et les ID t'inquiète pas ;)

Réponse 10 / 18

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
19 févr. 2010 à 15:28

Oui, le JS est bon.

Réponse 11 / 18

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 1
19 févr. 2010 à 21:56

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:

texte

contenu à révéler..


Le contenu qui est ici "texte" dans le HTML ne disparaît pas au survol.

Réponse 12 / 18

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
19 févr. 2010 à 22:37

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.

Réponse 13 / 18

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 1
19 févr. 2010 à 23:03

Ceci est affiché par un hover :

contenu à révéler..


Pas besoin de JS...mais...
le contenu à cacher/montrer par JS est celui dans:
texte

Réponse 14 / 18

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
20 févr. 2010 à 00:35

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 ?

Réponse 15 / 18

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 1
20 févr. 2010 à 01:26

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 :)

Réponse 16 / 18

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
20 févr. 2010 à 15:11

Comme ça ? http://paste.pocoo.org/show/180477/

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 1
20 févr. 2010 à 21:38

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à ;)

Réponse 17 / 18

avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
20 févr. 2010 à 23:37

Et bien ? Ce n'est pas ce que fait mon script ?
Par contre ce n'est pas faisable en CSS avec :hover

Réponse 18 / 18

Id=ntity Messages postés 79 Date d'inscription mercredi 18 novembre 2009 Statut Membre Dernière intervention 7 janvier 2011 1
20 févr. 2010 à 23:56

Je te montre la page par message privé, tu comprendras mieux ^^

Discussions similaires

Code de renvoi d'appel : Ooredo, Mobilis...

Acces à snapchat temporairement désactivé

Discussions similaires

Newsletters