Vấn đề khi sử dụng elem.dataset với IE và JSFiddle

Question

Trong JSFiddle này tôi đã tạo trên Chrome, tôi thấy rằng nó không thể hoạt động trên IE (tôi đang sử dụng IE9). Bất kỳ lý do nào về điều này: http://jsfiddle.net/ZSB67/.

var backImage = [ 
    "http://alm7.wikispaces.com/file/view/RedBackground.bmp/144018347/RedBackground.bmp", 
    "http://www.time2man-up.com/wp-content/uploads/2011/07/black-background.jpg", 
    "http://1.bp.blogspot.com/--GorNQoEUxg/TfWPyckVeMI/AAAAAAAAAHk/0208KqQf3ds/s1600/yellow_background.jpg", 
    "" 
    ]; 

function changeBGImage(whichImage) { 
    if (document.body) { 
     document.body.style.background = "url(\"" + backImage[whichImage] + "\")"; 
    } 
} 
var buttons = document.querySelectorAll('.bg_swap'), 
    button; 

for (var i = 0; i < buttons.length; i++) { 
    button = buttons[i]; 
    button.onclick = function() { 
     changeBGImage(this.dataset.index); 
    }; 
} 

Answer 1

IE không hỗ trợ elem.dataset. Bạn cần phải nhận rõ ràng thuộc tính: http://jsfiddle.net/ZSB67/1/.

changeBGImage(this.getAttribute('data-index')); 

Trong tương lai, bạn có thể muốn nhấn F12 và xem bảng điều khiển vì lỗi, vì nó cho biết điều gì đã gây ra sự cố ở đây.

Answer 2

dataset dường như không được xác định trong IE. Đó có lẽ là nguồn chính của vấn đề. Mọi thứ khác hoạt động tốt trên IE9 64 bit.

Bạn chỉ có thể lưu trữ trạng thái đó tại địa phương trong JS:

for (var i = 0; i < buttons.length; i++) 
    register(i) 

function register(i){ 
    button = buttons[i]; 
    button.onclick = function() { 
     changeBGImage(i); 
    }; 
} 

Hoặc bạn có thể làm một tra cứu

for (var i = 0; i < buttons.length; i++) 
    button = buttons[i]; 
    button.onclick = function() { 
     changeBGImage(this.getAttribute('data-index')); 
    }; 
} 

Answer 3

this.dataset.index không hoạt động trên IE. Hãy thử sử dụng this.getAttribute("data-index").

Answer 4

Jquery có phương thức data() cũng hoạt động trong phiên bản IE mà tôi đã thử nghiệm (IE8 và IE10).

Kiểm tra tài liệu ở đây:

http://api.jquery.com/data/

Answer 5

Lý do tại sao tài sản dataset không được công nhận bởi các phiên bản cũ của trình duyệt IE (trên thực tế tất cả chúng trừ IE11 +) là một thực tế rằng nó đã được giới thiệu trong HTML5 mà các phiên bản đó không hỗ trợ hoặc chỉ hỗ trợ một phần.

Để có được giá trị của thuộc tính này, người ta có thể sử dụng js tinh khiết như

changeBGImage(this.attributes.getNamedItem("data-index").value) 

hoặc đơn giản hơn bằng cách sử dụng các) phương pháp getAttribute (:

changeBGImage(this.getAttribute("data-index")) 

hoặc jQuery (v 1.2.3+):

$(".bg_swap").click(function(){ 
    changeBGImage($(this).data("index")); 
})