在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，我不认为这里的正则表达式是邪恶的。 放手去做！

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

您可以使用正则表达式，但使用split和indexof将被更多程序员理解。 对于这么简单的事情，也许更好的避免正则表达式。

在事件处理程序中使用jQuery规范化的Event对象：

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

        }
    }
}