Comment créer une référence d'identifiant générique avec jQuery

Question

J'ai environ 6 éléments div avec la même classe. Quand je souris sur l'un d'eux, je veux montrer un autre div à côté d'eux.

Je pense à leur donner tous un identifiant de la forme id = "mydiv-divname" où mydiv- sera toujours constant.

Comment puis-je référencer les éléments mydiv- *. Je ne peux pas trouver la syntaxe exacte mais je pense que ça devrait être quelque chose comme $ ("# mydiv -" [*]) où le * représente une sorte de joker.

Answer 1

Quel but l'ID sert? S'ils sont tous étiquetés avec le même nom de classe, vous pouvez y accéder tout par classe:

`$(".className")... 

Pour déclencher un événement lorsque l'un de ces éléments est plané, utilisez

`$(".className").hover(...) 

Notez que la fonction dans le hover() ne sera déclenché que pour l'élément qui est actuellement plané.

Ils font quelque chose de semblable à ce que vous essayez d'atteindre here - Fading un élément ou sur vol stationnaire (de nombreux éléments sur la page marquée par cette classe)

Answer 2

Pourquoi ne pas simplement utiliser la classe dans le sélecteur au lieu de l'identifiant, comme dans

jQuery('.commonClass');

Answer 3

Il semble que vous allez quelque chose comme ceci:

HTML:

<div class="content" id="con_a">Hello world.</div> 
    <div id="show_con_a" style="display:none">Show Me on content div "a" hover</div> 

<div class="content" id="con_b">Nice to meet you.</div> 
    <div id="show_con_b" style="display:none">Show Me on content div "b" hover</div> 

<div class="content" id="con_c">See you later.</div> 
    <div id="show_con_c" style="display:none">Show Me content div "c" hover</div> 

JAVASCRIPT:

//Collect all divs with 'content' class 
$('.content').each(function(){ 
    //Set mouse handler for each content div 
    $(this).hover(function(){ 
     $('#show_' + this.id).show(); 
    }, 
    function(){ 
     $('#show_' + this.id).hide(); 
    }); 
}); 

ALTERNATIVE JAVASCRIPT:

//Collect all divs with an id that begins with 'con_' 
$("[id=^'con_']").each(function(){ 
    //Set mouse handler for each content div 
    $(this).hover(function(){ 
     $('#show_' + this.id).show(); 
    }, 
    function(){ 
     $('#show_' + this.id).hide(); 
    }); 
});