Поиск подходящего имени класса в jQuery

Question

У меня есть серия миниатюр изображений на странице. Они созданы с использованием спрайтов CSS.

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

Первоначально я использовал id="galleryImg1", но изменил на class="galleryImg1", потому что изображения могут появляться в нескольких местах на одной странице, и я хотел избежать дублирования идентификаторов.

У меня есть селектор jQuery, чтобы прикрепить события щелчка ко всем этим классам.

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

Что мне интересно, так это простой способ узнать className, начинающийся с 'galleryImg', по которому щелкнули. Должен ли я использовать регулярное выражение или есть более «умный» способ?

(да, если бы я использовал селектор #ID, я мог бы просто сказать «this.id», но, как уже упоминалось, я не хочу использовать идентификаторы, потому что я хочу отобразить несколько копий одного и того же изображения.)

Answer 1

Насколько я знаю, вам понадобится довольно простое регулярное выражение, например:

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

Если вы особенно против этого, вы можете использовать что-то вроде этого, которое не будет проверяться, но выполнит работу.

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

Поскольку я предполагаю, что у вас есть полный контроль над вашим HTML, и вы знаете, что за классом galleryImg всегда будет следовать идентификатор, я не думаю, что регулярное выражение здесь вообще зло. Просто иди с этим!

Answer 2

То, что я делаю, выглядит примерно так:

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

Answer 3

Удивило, что никто никогда не упоминал data атрибуты как решение.

Более подробный и понятный, и вы можете поставить все, что вы хотите для значения.

<div class="galleryImg1" data-imagename="cat" data-caption="This is a cat"></div>
<div class="galleryImg2" data-imagename="img1"></div>

С помощью jQuery вы можете получить значение с помощью $(ele).data('imagename')

Answer 4

Вы можете использовать Regex, но использование split и indexof будут понятны большему количеству программистов. Кроме того, для чего-то такого простого, может быть, лучше избегать регулярных выражений.

В обработчике событий используйте нормализованный объект события 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.

        }
    }
}