在 jQuery 中查找匹配的类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/552297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Finding matched classname in jQuery
提问by Simon_Weaver
I have a series of image thumbnails in a page. They are created using css sprites.
我在页面中有一系列图像缩略图。它们是使用 css sprites 创建的。
<div class="galleryImg1"></div>
<div class="galleryImg2 featured"></div>
<div class="galleryImg3"></div>
I was originally using id="galleryImg1"but changed to using class="galleryImg1"because the images may appear in multiple places on the same page and i wanted to avoid duplicate ids.
我最初使用id="galleryImg1"但改为使用，class="galleryImg1"因为图像可能出现在同一页面的多个位置，我想避免重复的 id。
I have a jQuery selector to attach click events to all of these classes.
我有一个 jQuery 选择器来将点击事件附加到所有这些类。
$("[class^=galleryImg]").click(function() {
// how do i get 'galleryImg2' and '2' here?
}
What I'm wondering is if there is an easy way to find out the className beginning with 'galleryImg' that was clicked on. Will I have to use a regular expression or is there a 'cleverer' way?
我想知道是否有一种简单的方法可以找出以“galleryImg”开头的被点击的 className。我必须使用正则表达式还是有“更聪明”的方法？
(yes if i was using an #ID selector then I could just say 'this.id' but as mentioned I don't want to use IDs because I want to display multiple copies of the same image.)
（是的，如果我使用的是 #ID 选择器，那么我可以说“this.id”，但如前所述，我不想使用 ID，因为我想显示同一图像的多个副本。）
回答by Paolo Bergantino
As far as I know, you're going to need a pretty basic regular expression, like so:
据我所知，您将需要一个非常基本的正则表达式，如下所示：
$("[class^=galleryImg]").click(function(Event) {
var id = this.className.match(/galleryImg(\d+)/)[1];
console.log(id);
});
If you're particularly averse to this, though, you can use something like this, which won't validate but will Get The Job Done.
但是，如果您特别反对这一点，您可以使用类似这样的方法，它不会验证但会完成工作。
<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>
Since I am assuming you have full control over your HTML and you know that galleryImg class will always be followed by the ID I don't think a regular expression here is evil at all. Just go with it!
因为我假设您可以完全控制您的 HTML 并且您知道 galleryImg 类将始终跟随 ID，所以我认为这里的正则表达式根本不是邪恶的。放手去做！
回答by Marcel
What I do is something like this:
我所做的是这样的：
<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>
回答by Simon_Weaver
Surprised nobody ever mentioned dataattributes as a solution.
令人惊讶的是，没有人提到data属性作为解决方案。
More verbose and clearer and you can put whatever you want for the value.
更详细和更清晰，您可以为该值输入任何您想要的内容。
<div class="galleryImg1" data-imagename="cat" data-caption="This is a cat"></div>
<div class="galleryImg2" data-imagename="img1"></div>
With jQueryyou can get the value with $(ele).data('imagename')
使用jQuery，您可以获得值$(ele).data('imagename')
回答by Ash
You could use a Regex, but using split and indexof will be understood by more programmers. Also for something so simple, maybe better to avoid Regex.
您可以使用正则表达式，但使用 split 和 indexof 会被更多程序员理解。同样对于如此简单的事情，最好避免使用正则表达式。
In the event handler use the jQuery normalized Event object:
在事件处理程序中使用 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.
}
}
}
