jquery et selection de div a partir de leur nom

Marsh Posté le 23-04-2012 à 17:42:09

bonjour !

j'ai un petit souci avec du js, j'essai de bricoler un petit systeme de gallerie et je bloque sur une parti du code (je suis pas encore tres a l'aide en js du coup je patine un peu)

m'enfin voila ce que je cherche a faire :

j'ai plusieurs chiffres (de 1 a 10) et lors de leur survol il changent couleur (ça ça marche, j'aurai pu aussi le faire en css, mais le jquery me permettra eventuellement d'ajouter un peu d'animation au changement de couleur) et surtout (et la ça bloque) chaque chiffres appellent une image lui correspondant, qui doit s'afficher en fade, mais je n'y arrive pas.

alors voici ce que j'ai fait :

partons d'un chiffre #p01_01 qui doit, lors de son survol afficher l'image #img_p01_01 (#p02_02 affichera #img_p02_02 etc...)

voila ce que j'ai mis dans mon js :

Code :

$(document).ready(function(){
var max_img_gal = 10;
for (i=1; i<=max_img_gal; i++) {
$("#p01_0"+i).mouseover(function(){
$(this).css('color','#0f0');
$(this).siblings(".page_chiffres" ).css('color','#666');
$("div[id^='p01_']" ).each(function() {
var img_num = $(this).attr("id" ).match(/[\d]+$/);
$("#img_p01_"+img_num).fadeIn(100);
});
});
}

voila, donc la parti css color marche bien par contre c'est en dessous que ça se passe pas bien, l'ideal aurait ete que j'arrive a recuperer simplement le i du "p01_0"+i qui subi le mouseover et a juste l'ajouter de la meme maniere pour selectionner l'image que je veux traiter en faisant #img_p01_0"+i une fois dans la fonction , mais je n'ai pas trouvé comment faire, du coup j'ai opté pour une methode (qui ne marche pas la) de redecoupage de nom d'id un peu indigeste.... et ça ne fonctionne pas dans mon cas.

quelqu'un aurait une idée de comment je pourrais y parvenir ?

Reply

Marsh Posté le 23-04-2012 à 17:42:09

Reply

Marsh Posté le 28-04-2012 à 01:05:40

donne ton code HTML, sans ça on ne peut pas t'aider de manière optimale.

Reply

Marsh Posté le 28-04-2012 à 16:10:20

re !

en fait trouvé une solution ! toujours en partant du fait que le selecteur a une id de la forme p01_0x et son image correspondante img_p01_0x :

Code :

$(document).ready(function(){
var max_img_gal = 11;
for (i=1; i<=max_img_gal; i++) {
$("#p01_0"+i).mouseover(function(){
$(this).css('color','#fff');
$(this).siblings(".page_chiffres" ).css('color','#666');
var num_id = $(this).attr('id');
var img_id = $("#img_"+num_id);
$(".img_thumb:not(img_id)" ).fadeOut(400);
$(img_id).fadeIn(400);
});
}
});

c'est nickel de chez chrome c'est tout con !

Message édité par crasse2 le 28-04-2012 à 16:11:37

Reply

Marsh Posté le 29-04-2012 à 22:32:49

$("div[id^=p01_]" )

fait aussi bien au niveau seleteur

---------------
Blablaté par Harko

Reply

Marsh Posté le 29-04-2012 à 23:07:25

bonsoir, ah bah probablement ! mon erreur venait peut etre du fait que j'avais laissé des guillemet autour de p01_

Reply

jquery et selection de div a partir de leur nom

Sujets relatifs:

Leave a Replay