Appliquer un même script sur différents éléments de même type
Bonjour à tous,
voilà je suis en train de créer un formulaire de modification des informations d'un compte et j'aimerais que lorsque l'on clic sur le bouton modifier une div s'affiche pour permettre les modifications. Je passe donc d'un texte en solide pour un input de type texte. Le problème c'est qu'avec mon code tel quel, je ne peux modifier que mon premier paramètre et pas celui correspond à mon clic.
je suppose qu'il faudrait faire une boucle qui modifie au clic les id de la ligne en cours pour que mon script s'applique au bon élément... mais je suis un peu bloqué!
j'aurais bien fait un code spécifique pour chaque ligne li mais j'ai beaucoup de paramètres modifiables et mon script est déjà assez lourd vu qu'il récupère 4 variables...
je vous laisse mon code pour plus de précisions :
<!-- HTML -->
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <ul class="listes-a-propos">
<li>
<a class="lien-maquettes" id="conteneur">
<h3>Nom : Valjean</h3>
<a id="small1" href="javascript: switchInfoPerso1();"><input type="submit" value="Modifier"/></a>
</a>
<div class="details" id="maquettes" style="display: none;">
<h3>Nom : <input type="text" name="nom" /></h3>
<a id="small2" href="javascript: switchInfoPerso2();"><input type="submit" value="Enregistrer"/></a>
</div>
</li>
<li>
<a class="lien-maquettes" id="conteneur">
<h3>Prénom : Jean</h3>
<a id="small1" href="javascript: switchInfoPerso1();"><input type="submit" value="Modifier"/></a>
</a>
<div class="details" id="maquettes" style="display: none;">
<h3>Prénom : <input type="text" name="prenom" /></h3>
<a id="small2" href="javascript: switchInfoPerso2();"><input type="submit" value="Enregistrer"/></a>
</div>
</li>
</ul> |
<!-- JAVASCRIPT -->
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| function switchInfoPerso1() {
divInfo1 = document.getElementById('maquettes');
divInfo2 =document.getElementById('conteneur');
divInfo3 =document.getElementById('small1');
divInfo4 =document.getElementById('small2');
if (divInfo1.style.display == 'none') {
divInfo1.style.display = 'block';
divInfo4.style.display = 'block';
divInfo2.style.display = 'none';
divInfo3.style.display = 'none';
}
else
divInfo.style.display = 'none';
};
function switchInfoPerso2() {
divInfo1 =document.getElementById('conteneur');
divInfo2 =document.getElementById('maquettes');
divInfo3 =document.getElementById('small2');
divInfo4 =document.getElementById('small1');
if (divInfo1.style.display == 'none') {
divInfo1.style.display = 'block';
divInfo4.style.display = 'block';
divInfo2.style.display = 'none';
divInfo3.style.display = 'none';
}
else
divInfo.style.display = 'none';
}; |
Merci par avance pour votre aide!!
Bonne journée
