jQuery tooltip + ajax content

Question

Tôi đang cố gắng thực hiện chú giải công cụ rollover đơn giản cho hình ảnh trên trang khi bạn cuộn qua một hình ảnh, bạn sẽ nhận được một cửa sổ chú giải công cụ nhỏ và tải nội dung từ cơ sở dữ liệu qua AJAX.

Tôi có thể cùng nhau nhanh chóng thực hiện điều này nhưng tôi muốn một cách thanh lịch để làm điều này mà không cần sử dụng bất kỳ JS nội tuyến nào.

Vì vậy, câu hỏi của tôi là: Nếu tôi nắm bắt sự kiện rollover bên trong tệp .js bên ngoài của tôi, làm cách nào để chuyển nó qua ID cơ sở dữ liệu?

Tôi đang sử dụng jQuery vì vậy tôi sẽ làm điều gì đó như thế này:

$('.item_roll').mouseover(function() { 
    //show tooltip and load ajax content 
} 

và HTML của tôi sẽ là một cái gì đó như thế này:

<img src="thumb.png" class="item_roll" /> 

Nếu không gọi một hàm từ thẻ img, làm thế nào cách nào để gửi cuộc gọi JS phía trên id cơ sở dữ liệu? Tôi hy vọng điều đó đúng.

Cảm ơn.

Answer 1

tôi khuyên bạn nên có cả một lớp và một id trong thẻ image:

<img src="thumb.png" id="id_28436379" class="item_roll" /> 

Sau đó, trong sự kiện jQuery, bạn có thể truy cập như vậy:

$(".item_roll").mouseover(function(event){ 
    alert(event.target.id.split("_")[1]); // displays 28436379 
}); 

này sẽ cho phép bạn truy cập id cơ sở dữ liệu bằng cách biến nó thành id của thẻ hình ảnh.

EDIT: Sau khi đọc một số nhận xét hữu ích, tôi đã thay đổi câu trả lời để id không bắt đầu bằng số nguyên, vì đây không phải là chuẩn và có thể không hoạt động trên tất cả các trình duyệt. Như bạn có thể thấy, mã split/[] trích xuất số id từ chuỗi id.