11548 sujets

JavaScript, DOM et API Web HTML5

[réglé]Utiliser une variable pour sélectionner un élément

Bonjour,

Je commence à avoir une petite expérience jQ, mais pas forcément toutes les bases js Smiley confus

Aussi comment puis-je cibler un élément dont le nom (un #id qui vaut sect_n, n étant un un entier quelconque)
est construit selon certains évènements

(ici le survol d'un area dans une map devrait déclencher l'apparition d'un div #bulle_sect_N).
J'ai mis des traces et ma variable labulle prend bien ce que je souhaite.

dans l'ex ci-dessous j'ai tenté de cibler avec Smiley attribut ,
jQuery("div.bulle[id=labulle]").show("slow").addClass("open")

mais j'avais avant tenté directement (div#labulle) mais guillemets, pas guillemets?

bref comment une valeur de variable peut-elle être reprise dans un ciblage jQ ?

Merci


// gestion du hover d'un area 
jQuery(function(){
var labulle = 0;
    jQuery("#carte_meecsy area").mouseenter(function(){
        var hovered = jQuery(this); // le area survolé
        var id_area = jQuery(this).attr("id");// on récupère le texte du id de l'élément.
        jQuery("p#area span").text(id_area);
		
		//on affiche une info bulle : il y a en html 85 div positionnés (empilés) en display:none IDentifiés bulle_N
		// ou N est le n° récupéré dans le id du area. donc le div bulle est id=bulle_sect_1 et classe=bulle par exemple.
		var labulle = "bulle_" + id_area;
		jQuery("p#debug-bulle span").text(labulle);
		jQuery("div.bulle[id=labulle]").show("slow").addClass("open")

});..........

Modifié par elz64 (12 Nov 2009 - 13:11)
elz64 a écrit :
oops impossible d'éditer son propre post ?

Ben si, tu as un bouton éditer en haut de ton post. Je pense que je pourrais t'aider si je comprenais ton problème mais là…
Lors de l'envoi de mon post initial je n'avais pas le bouton éditer, j'ai du me reloger. Smiley confus

ma propre réponse est donc à supprimer du fil.
elz64 a écrit :
Je commence à avoir une petite expérience jQ, mais pas forcément toutes les bases js Smiley confus

Solution: apprendre les bases de JavaScript. Apprendre ou réviser les chaines de caractères et leur manipulation.

elz64 a écrit :
Aussi comment puis-je cibler un élément dont le nom (un #id qui vaut sect_n, n étant un un entier quelconque) est construit selon certains évènements

// bla bla, mettons que je sois dans le contexte d'une fonction
  var n = ... // un des buts de ma fonction est de récupérer un numéro qui va bien
  var mon_element = $("#sect_" + n); // pure magic


elz64 a écrit :
(ici le survol d'un area dans une map devrait déclencher l'apparition d'un div #bulle_sect_N).

Mettons que tu as:
<area href="mon_url_qui_va_bien" alt="..." class="zone_info" id="zone_info_18" ... />
...
<div class="bloc_info" id="bloc_info_18">...</div>

En JavaScript avec jQuery, tu peux avoir:
$('.zone_info').hover(function(){
  var num = $(this).attr('id').substr(10); // fin de l'id à partir du 10e caractère
  if ( /^[0-9]{1,4}$/.test(num) ) { // on continue uniquement si on a récupéré un nombre
    var $bloc_info = $('bloc_info_' + num); // on récupère le DIV correspondant au AREA survolé
    $bloc_info.show(); // on fait ce qu'on veut avec
  }
});


elz64 a écrit :
bref comment une valeur de variable peut-elle être reprise dans un ciblage jQ ?

La fonction jQuery() accepte en paramètre un objet DOM correspondant à un élément, ou bien une chaine de caractères correspondant à un sélecteur CSS. Rien ne t'empêche de concaténer différentes chaines entre elles, et d'utiliser des variables.
Modifié par Florent V. (12 Nov 2009 - 12:51)
c'est ce que j'avais fait sous diverses formes...

le pb venait uniquement du fait d'une coquille dans le nommage de mes id dans le html généré, le script était bon mais ne risquait pas de trouver le bon id puisque pas nommé comme prévu.. Smiley confused

Merci de ta réponse détaillée en tout cas.
Sujet clos
Aller à