jQuery selector với thuộc tính cụ thể

Question

Tôi đã có mã này:

$('a').click(
    function() { 
     $("#change_flash").css("display", "block"); $("#my_flash").css("display", "none"); 
    }); 

Nhưng một này làm việc cho tất cả các yếu tố neo. Tôi muốn tác động với tập lệnh này chỉ cho các phần tử neo chứa thuộc tính rel = "lightbox".

Làm cách nào để đạt được điều đó?

Answer 1

$('a[rel="lightbox"]').click(
    function() { 
     $("#change_flash").css("display", "block"); $("#my_flash").css("display", "none"); 
    }); 

Answer 2

Sử dụng như sau:

$('a[rel="lightbox"]').click(
    function(){ 
     // do your stuff here 
    }); 

này được sử dụng attribute="value" ký hiệu (xem tài liệu tham khảo).

Có, cũng được, tùy chọn khác:

• thuộc tính bắt đầu-với: attribute^="value",
• thuộc tính-ends-with: attribute$="value",
• thuộc tính chứa: `thuộc tính * = "giá trị" .

Lưu ý, tất nhiên, rằng trong khi $('[rel="lightbox"]') là một selector hoàn toàn hợp lệ tất cả bởi chính nó, điều này sẽ gây jQuery để kiểm tra mỗi yếu tố trên trang cho rằng thuộc tính và giá trị để ràng buộc/gán sự kiện click (S); do đó, tốt nhất nên sử dụng tên thẻ, do đó, $('a[rel="lightbox"]'), hoặc tên lớp để giới hạn số lượng phần tử mà jQuery phải tìm kiếm để tìm các phần tử phù hợp.

Mặc dù trong các trình duyệt hiện đại, dường như tôi nhớ rằng 'tìm kiếm' này được chuyển giao cho người gốc document.querySelectorAll(), thay vì sử dụng Sizzle, nhưng thậm chí tốt nhất là giới hạn số lượng công việc mà trình duyệt cần.

Tài liệu tham khảo:

• attribute-equals selector.
• atrribute-begins-with selector.
• attribute-ends-with selector.
• attribute-contains selector.