div avec concaténation

Version imprimable

Bonjour,

Voici mon code :
Code:

1 2 3 4 5 <select name="choix_membre" id_lis="1"><option value="10">Fiona</option><option value="15">Ines</option></select> <button id_objet="1">Lui Acheter</button> <div id="1">PHOTO membre</div> <select name="choix_membre" id_lis="2"><option value="10">Fiona</option><option value="15">Ines</option></select> <button id_objet="1">Lui Acheter</button> <div id="2">PHOTO membre</div>
Je souhaite que mon client puisse choisir le membre à qui il souhaite offrir un cadeau (via le select) et que dès qu'il a sélectionné une personne sa photo s'affiche dans la derniere balise div.

J'ai réussi à écrire ce code :
Code:

1 2 3 4 5 $("select[id_lis]").bind("change", function(event) { var id_liste = $(this).val(); $("div#"+id_liste).html("ici"); });
Mon code étant dynamique id_lis ne peut jamais être connu à l'avance mais est toujours identique à l'id du dernier div; si je remplace id_liste par le numéro d'une liste tout fonctionne bien et s'affiche comme ça devrait, mais comment faire pour que mon code fonctionne via cette concaténation ?

Merci pour vos réponses

25/01/2013, 21h26
Bovino

Tu sembles confondre la valeur d'un attribut et la valeur sélectionnée d'un select !

Code:

var id_liste = $(this).val();

va récupérer la valeur de l'option sélectionnée, soit 10 ou 15.
Donc

Code:

$("div#"+id_liste)

n'existe pas selon le code que tu donnes !

Ensuite, les attributs tels que id_lis, c'est moche et ça n'existe pas !
Si tu veux définir des attributs personnalisés, il faut passer par les attributs de type data-*...
Le principe est simple : le nom de l'attribut (conforme W3C) commence par data-, la suite étant celle que tu veux, par exemple data-id_list et ensuite, tu peux récupérer la valeur via l'objet data() :

Code:

$(this).data('id_list')

Bonsoir

Si j'ai bien compris...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<select class="liste">
	<option value="0" selected>Choisir un membre</option>
	<option value="10">Fiona</option>
	<option value="15">Ines</option>
</select>
 
<button data-membre="0">Lui Acheter</button>
 
<div data-membre="0">PHOTO membre</div>
 
<select class="liste">
	<option value="0" selected>Choisir un membre</option>
	<option value="10">Fiona</option>
	<option value="15">Ines</option>
</select>
 
<button data-membre="0">Lui Acheter</button>
 
<div data-membre="0">PHOTO membre</div>

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
32
$( function(){
 
	var photoMembres = {
		0 : "images/info.gif",
		10 : "images/imageTest.png",
		15 : "images/avatarDVJH.jpg"
	};
 
	$( "select.liste" ).on( "change", function( event ){
		var jObj = $( this ),
			n = jObj.val();
 
		jObj
			.nextAll( "button[data-membre]" )
			.eq( 0 )
			.data( "membre", n )
			.end()
			.nextAll( "div[data-membre]" )
			.eq( 0 )
			.data( "membre", n )
			.html( '<img src="' + photoMembres[ n ] + '">' );
	});
 
	$( "button[data-membre]" ).on( "click", function(){
		var n = $( this ).data( "membre" );
 
		if ( n > 0 ){
			console.log( "Acheter un cadeau pour le membre : ", n );
		}
	});
 
});