在jQuery中查找匹配的类名

Question

我在页面中有一系列图像缩略图.它们是使用css sprites创建的.

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

我最初使用id="galleryImg1"但改为使用,class="galleryImg1"因为图像可能出现在同一页面上的多个位置,我想避免重复的ID.

我有一个jQuery选择器将click事件附加到所有这些类.

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

我想知道的是,是否有一种简单的方法可以找到以"galleryImg"开头的className.我是否必须使用正则表达式或者是否有"更聪明"的方式？

(是的,如果我使用的是#ID选择器,那么我可以说'this.id'但是如上所述,我不想使用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类将始终跟随ID,我不认为这里的正则表达式是邪恶的.放手去做!