Trình duyệt không quan sát những thay đổi để đĩa dữ liệu *, tính chọn thuộc tính CSS không render

Question

Với CSS này:

[data-myplugin-object="blue-window"]{ 
    background-color: #00f; 
} 

[data-myplugin-object="red-window"]{ 
    background-color: #f00; 
} 

Và jQuery này:

$('[data-myplugin-object="blue-window"]').each(function(event){ 
    $(this).data({ 
     'myplugin-object': 'red-window' 
    }); 
}); 

Và đoạn mã HTML này:

<div data-myplugin-object="blue-window"> 
    <p>Hello world</p> 
</div> 

Bây giờ, người ta sẽ mong đợi rằng khi đoạn mã jQuery được thực thi (được trì hoãn đúng cho đến tải trang hoàn tất khóa học) cửa sổ màu xanh lam của tôi (, lần đầu hiển thị màu xanh) sẽ chuyển sang màu đỏ.

Không, chắc chắn là không; và sử dụng Firebug và Công cụ dành cho nhà phát triển trong Firefox và Chrome tương ứng, tôi không thể quan sát bất kỳ thay đổi nào đối với thuộc tính data-*.

Để trình duyệt (và hộp công cụ DOM cho vấn đề đó) để quan sát các thay đổi, tôi có cần hoàn nguyên về .attr() hoặc có giải pháp cho việc này không?

Answer 1

jQuery.data() thuộc tính không thực sự được lưu trữ trên đối tượng DOM trong jQuery. Đối tượng DOM được gắn thẻ với một ID jQuery duy nhất và dữ liệu thực tế được lưu trữ trong một cấu trúc dữ liệu javascript riêng biệt. Trong số các lý do khác, jQuery thực hiện theo cách này để ngăn chặn các lỗi rò rỉ bộ nhớ tham chiếu vòng tròn có thể xảy ra trong một số trình duyệt khi giá trị dữ liệu là tham chiếu đến các đối tượng DOM khác.

Nếu bạn muốn thay đổi các thuộc tính DOM thực tế, tôi muốn đề nghị thiết lập các thuộc tính trực tiếp cho mình như thế này:

obj.attr("data-myplugin-object", "red-window"); 

Mặc dù, cho những gì bạn đang làm, tôi nghĩ rằng hầu hết mọi người sẽ sử dụng thêm/loại bỏ/thay đổi tên lớp CSS, không phải thuộc tính tùy chỉnh vì đó là cách phổ biến để thay đổi quy tắc CSS nào áp dụng cho đối tượng.

<div id="myObj" class="blueWindow"> 
    <p>Hello world</p> 
</div> 

.blueWindow {background-color: #00F;} 
.redWindow {background-color: #F00;} 

$("#myObj").removeClass("blueWindow").addClass("redWindow"); 

Hoặc nếu không có các lớp khác trên đối tượng:

$("#myObj").attr("class", "redWindow");