1 script pour plusieurs éléments

Sujet résolu

10 novembre 2010 à 20:33:58

Bonsoir, je voulais savoir si en javascript il était possible d'avoir un script pour plusieurs élément selectioné par id ? exemple une div déroulante : 1 script pour 3 div ?

var objet = document.getElementById('popup') ect... Dans cet exemple j'ouvre 1 div mais est possible d'en ouvrir d'autre sans recopier le long code x fois ?

Merci

lieo

10 novembre 2010 à 23:48:41

Pas sur de saisir la question.

Si j'ai bien compris, tout simplement :

<button onclick="maFonction('id1')">Bouton 1</button>
<button onclick="maFonction('id2')">Bouton 2</button>

function maFonction(id){
    var monId = document.getElementById(id);
}

Tu transmet l'id dans la fonction, et tu la récupère pour gEBI.
Ou en utilisant this, maFonction(this) , qui va renvoyer l'id où ce trouva la fonction.

capolino

11 novembre 2010 à 9:44:20

Voila le lien qui ouvre la div :

<a id="a1" href="javascript:;" onclick="Suite(this)">En savoir + </a>
<div id="popup" style="display: none;"></div>

<script type="text/javascript">

function Suite(lien){
	
	var objet = document.getElementById('popup'); // entre les deux ' tu mes le nom du div que tu veux faire apparaître !
	
	if(objet.style.display == "none" || !objet.style.display){
		
		objet.innerHTML = "";
		objet.style.display = "block";
		objet.style.overflow = "hidden"; 
		lien.innerHTML = "Masquer";
       
        var hFinal      =     100;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     0;	 	//Hauteur initiale (la hauteur dès le début !)
       
        var timer;
        var fct =        function ()
        {
                hActuel  +=       20;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
				
                objet.style.height     =	 hActuel      +     'px';
				
                if( hActuel > hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                        objet.style.overflow    =   'inherit';
                }
        };
        fct();

        
		timer = setInterval(fct,40);    //Toute les 40 ms
		
	}else if(objet.style.display == "block"){
		
		var hFinal      =     0;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     100;	 	//Hauteur initiale (la hauteur dès le début !)
       
        var timer;
        var fct =        function ()
        {
                hActuel  -=   20;     //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
				
                objet.style.height     =	 hActuel      +     'px';
				
                if( hActuel < hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                        objet.style.overflow    =   'inherit';
						objet.style.display     =   "none";
                }
        };
        fct();

        
		timer = setInterval(fct,40);    //Toute les 40 ms
		

		lien.innerHTML = "En savoir +";
		
	}
}
</script>

Il ya effectivement le "this" mais j'ai toujours le meme probleme, quand le clique sur le lien de la 3eme div, il m'ouvre la première et uniquement la première..
Merci de ta reponse

lieo

11 novembre 2010 à 13:42:22

Il suffit de préciser l'Id de la Pop-up lors du clic sur le lien.
En plus du mot this, qui est utilisé que pour récupérer l'objet d'où est appelé la fonction.

Exemple avec this :

<input type="text" onclick="test(this)" />

function test(obj){
   obj.value = "";
}

On récupère directement l'objet ou ce trouve le onClick.

Dans ton cas faut simplement rajouter :

<button type="button" onclick="Suite(this, 'popup')">En savoir + </button>
<div id="popup" style="display: none;"></div>
<button type="button" onclick="Suite(this, 'popup2')">En savoir + </button>
<div id="popup2" style="display: none;"></div>

Je te conseille d'ailleurs d'utiliser button, que href (tout du moins href vide).

Et d'utiliser l'argument transmit 'popup', et 'popup2'.

function Suite(lien, popup){
     var objet = document.getElementById(popup);//utilise la variable transmise

capolino

11 novembre 2010 à 15:14:31

Grand merci tout marche nikel... super sympa de ta part....
A la revoyure comme on dit

lol