我在页面中有一系列图像缩略图。它们是使用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,因为我想显示同一图像的多个副本。)
答案 0 :(得分:22)
据我所知,你需要一个非常基本的正则表达式,如下所示:
$("[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,我不认为这里的正则表达式是邪恶的。快去吧!
答案 1 :(得分:3)
我做的是这样的:
<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>
答案 2 :(得分:1)
您可以使用正则表达式,但更多程序员可以理解使用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.
}
}
}
答案 3 :(得分:1)
令人惊讶的是,没有人提到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')