Comment rendre plus propre ce code super simple svp ?

**frakosun** · 27/10/2009, 19h35

Bonjour,

déjà 3 heures que je galère pour optimiser un truc à 2 balles... juste dans un soucis de propreté

voilà mon script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    $(document).ready(function() {
     $('#HideMe').show();
 
    $('#shide').click(function() {
    $('#HideMe').show('fast');
    });
 
	 $('#shide2').click(function() {
     $('#HideMe').show('fast');
     });
 
 
     $('#shide3').click(function() {
      $('#HideMe').hide('fast');
 
      });
});

et le code html qui l'appelle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<input id="shide" type="radio" name="subscribe" value="1" checked />
<input id="shide2" type="radio" name="subscribe" value="2" />
<input id="shide3" type="radio" name="subscribe" value="3" />

mais question est : Comment rendre plus propre le javascript afin de ne pas être obligé de dupliquer les id à chaque bouton radio ?
En gros j'ai 3 boutons radios : 2 servent à afficher une div et un pour la cacher, selon la selection.

merci d'avance, je pète un plomb devant ma nullité absolue dans le domaine.

**Bovino** · 27/10/2009, 19h47

Salut,

le sélecteur $ de jQuery accepte plusieurs paramètres il me semble, tu peux donc tester :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('#shide', '#shide2', '#shide3').click(function() {
    $(this).val()==3 ? $('#HideMe').hide('fast') : $('#HideMe').show('fast');
}

**frakosun** · 27/10/2009, 20h37

merci bovino, j'avais déjà essayé un truc comme ça mais ça ne fonctionne pas

en fait je cherche à faire un truc dans ce style mais sans passer par les
mais sans passer par des "input onclick="...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    <input onclick="javascript: $('#HideMe').show('slow');" type="radio" name="subscribe" value="1" checked />
    <input onclick="javascript: $('#HideMe').show('slow');" type="radio" name="subscribe" value="2" />
    <input onclick="javascript: $('#HideMe').hide('slow');" type="radio" name="subscribe" value="3" />

**onirisme** · 28/10/2009, 06h55

Bonjour,

J'ai pas bien compris l'objectif de ton script... Que cherches-tu à faire au final ? Qui a t'il dans "#hideme'?

Tu devrais peut-être passer par des attributs de class ce qui te permet de regrouper des comportements identiques sur des balises différentes :

Bon, cela dit, regarde ce code et dis nous si c'est ce que tu veux (j'ai réduit ton code d'une seule ligne mais c'est déjà ca

) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script>
	$(document).ready(function(){
		$('.helper').not('.helper:last').click(function(){
			$("#hideme").show();
 
		});
		$(".helper:last").click(function(){
			$("#hideme").hide();
		});
	});
</script>
<body>
    <label>Input 1</label><input class="helper" id="id1" type="radio" name="subscribe" value="1"><br/>
    <label>Input 2</label><input class="helper" id="id2" type="radio" name="subscribe" value="2"><br/>
    <label>Input 3</label><input class="helper" id="id3" type="radio" name="subscribe" value="3"><br/>
    <div id="hideme">
	<p>
		Mon texte à moi...
	</p>
    </div>
</body>

**frakosun** · 28/10/2009, 09h31

Voilà c'est ça ce que je voulais faire, merci onirisme !

En fait je voulais rendre plus propre le code en "regroupant les comportements identiques", sans passer par des ids différents sur chaque input pour que ça fonctionne (je ne savais pas comment expliquer cela). Rigolez pas j'ai essayé pendant 3h sans succès, en passant par la valeur du champ ou des ids... je suis trop un quiche en jQuery c'est dingue. Pourtant j'essaie...

Sinon dans le hideme pour te répondre il y a un champ de formulaire facultatif ou obligatoire selon le choix effectué avec les boutons radios.

Un grand merci à tous les 2 en tout cas, voilà une journée qui commence bien

Comment rendre plus propre ce code super simple svp ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager