Tìm tên lớp phù hợp trong jQuery

Question

Tôi có một loạt hình thu nhỏ của hình ảnh trong một trang. Chúng được tạo ra bằng cách sử dụng sprites css.

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

tôi ban đầu được sử dụng id="galleryImg1" nhưng thay đổi để sử dụng class="galleryImg1" vì những hình ảnh có thể xuất hiện ở nhiều vị trí trên cùng một trang và tôi muốn tránh id trùng lặp.

Tôi có bộ chọn jQuery để đính kèm các sự kiện nhấp vào tất cả các lớp này.

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

Điều tôi đang tự hỏi là có cách dễ dàng để tìm ra className bắt đầu bằng 'galleryImg' đã được nhấp vào. Tôi sẽ phải sử dụng một biểu thức chính quy hoặc có cách 'thông minh hơn' không?

(có nếu tôi đang sử dụng bộ chọn #ID thì tôi chỉ có thể nói 'this.id' nhưng như đã đề cập tôi không muốn sử dụng ID vì tôi muốn hiển thị nhiều bản sao của cùng một hình ảnh.)

Answer 1

Theo như tôi biết, bạn sẽ cần một biểu thức chính quy khá cơ bản, như vậy:

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

Tuy nhiên, nếu bạn đặc biệt không thích điều này, bạn có thể sử dụng một cái gì đó như thế này, điều này sẽ không hợp lệ nhưng sẽ hoàn thành công việc.

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

Vì tôi giả sử bạn có toàn quyền kiểm soát HTML của mình và bạn biết rằng thư việnTôi sẽ luôn tuân theo ID mà tôi không nghĩ biểu hiện chính quy ở đây là tà ác. Chỉ cần đi với nó!

Answer 2

Bạn có thể sử dụng Regex, nhưng việc chia nhỏ và lập chỉ mục sẽ được hiểu bởi nhiều lập trình viên hơn. Ngoài ra đối với một cái gì đó rất đơn giản, có lẽ tốt hơn để tránh Regex.

Trong xử lý sự kiện sử dụng jQuery bình thường đối tượng sự kiện:

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

     } 
    } 
} 

Answer 3

Những gì tôi làm là một cái gì đó như thế này:

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