Ricerca nome classe corrispondente in jQuery

Question

Ho una serie di miniature di immagini in una pagina. Sono creati usando gli sprite css.

<div class="galleryImg1"></div> 
<div class="galleryImg2 featured"></div> 
<div class="galleryImg3"></div> 

Mi è stato originariamente usando id="galleryImg1" ma cambiato di utilizzare class="galleryImg1" perché le immagini possono apparire in più posti sulla stessa pagina e ho voluto evitare di ID duplicati.

Ho un selettore jQuery per allegare eventi di clic a tutte queste classi.

$("[class^=galleryImg]").click(function() { 
    // how do i get 'galleryImg2' and '2' here? 
} 

Quello che mi chiedo è se c'è un modo semplice per scoprire il className inizia con 'GALLERYIMG' che è stato cliccato. Dovrò usare un'espressione regolare o c'è un modo 'più intelligente'?

(sì se stavo usando un selettore #ID quindi ho potuto solo dire 'this.id' ma come già detto io non voglio usare gli ID perché voglio visualizzare più copie della stessa immagine.)

Answer 1

Per quanto ne so, si sta andando ad avere bisogno di un'espressione regolare piuttosto semplice, in questo modo:

$("[class^=galleryImg]").click(function(Event) { 
    var id = this.className.match(/galleryImg(\d+)/)[1]; 
    console.log(id); 
}); 

Se sei particolarmente contrario a questo, però, puoi usare qualcosa di simile, che non verrà convalidato ma otterrà il lavoro fatto.

<div class="galleryImg1" image_id="1"></div> 
<div class="galleryImg2 featured" image_id="2"></div> 
<div class="galleryImg3" image_id="3"></div> 

<script> 
$("[class^=galleryImg]").click(function(Event) { 
    var id = $(this).attr('image_id'); 
    console.log(id); 
}); 
</script> 

Dato che io parto dal presupposto che si ha il pieno controllo sul codice HTML e si sa che la classe GALLERYIMG sarà sempre seguito dal ID non credo un'espressione regolare qui è il male a tutti. Vai e basta!

Answer 2

È possibile utilizzare un Regex, ma l'uso di split e indexof sarà compreso da più programmatori. Anche per qualcosa di così semplice, forse meglio evitare Regex.

Nel gestore eventi utilizzare il normalizzata oggetto Event jQuery:

$("[class^=galleryImg]").click(function(Event) { 
    var classAttribute=Event.target.className 

    var classes=classAttribute.split(" "); 

    for (var i=0;i<classes.length;i++) 
    { 
     if (classes[i].indexOf('targetClassNamePrefix')==0) 
     { 
      // This element has the required class, do whatever you need to. 

     } 
    } 
} 

Answer 3

Quello che faccio è qualcosa di simile:

<div class="galleryImg 1"></div> 
<div class="galleryImg 2 featured"></div> 
<div class="galleryImg 3"></div> 

<script> 
$(".galleryImg").click(function(Event) { 
    var Class = $(this).attr('class').split(" "); 
    var id = Class[1] 
}); 
</script>