Encontrar nombre de clase coincidente en jQuery

Question

Tengo una serie de miniaturas de imágenes en una página. Se crean usando sprites css.

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

que estaba originalmente usando id="galleryImg1" pero cambió a la utilización de class="galleryImg1" porque las imágenes pueden aparecer en varios lugares en la misma página y que quería evitar identificadores duplicados.

Tengo un selector jQuery para adjuntar eventos de clic a todas estas clases.

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

Lo que me pregunto es si hay una manera fácil de averiguar la className comenzando con 'GALLERYIMG' que se hizo clic en. ¿Tendré que usar una expresión regular o hay una manera 'más inteligente'?

(sí, si yo estaba usando un selector #ID entonces yo sólo pude decir 'this.id' pero como se mencionó que no quiero utilizar identificaciones porque quiero mostrar varias copias de la misma imagen.)

Answer 1

Por lo que yo sé, vas a necesitar una expresión regular bastante básico, así:

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

Sin embargo, si eres particularmente reacio a esto, puedes usar algo como esto, que no validará, pero que lo hará.

<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> 

Desde que estoy asumiendo que tienen un control total sobre su HTML y usted sabe que la clase GALLERYIMG siempre será seguido por el ID No creo que una expresión regular aquí es malo en absoluto. ¡Sígueme el rollo!

Answer 2

Puede usar un Regex, pero el uso de split e indexof será entendido por más programadores. También por algo tan simple, quizás sea mejor evitar Regex.

En el controlador de eventos utilizar el jQuery normalizado objeto de evento:

$("[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

Lo que hago es algo como esto:

<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>