Problem z korzystaniem z elem.dataset z IE i JSFiddle

Question

W tym JSFiddle, który utworzyłem w Chrome, stwierdzam, że nie można pracować z IE (używam IE9). Każdy powód: 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 nie obsługuje elem.dataset. Musisz jawnie uzyskać atrybut: http://jsfiddle.net/ZSB67/1/.

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

W przyszłości możesz chcieć nacisnąć klawisz F12 i spojrzeć na konsolę w poszukiwaniu błędów, ponieważ napisano, co było przyczyną problemu.

Answer 2

dataset wydaje się być niezdefiniowane w IE. To prawdopodobnie główne źródło problemu. Wszystko inne działa dobrze na 64-bitowym IE9.

Można przechowywać tylko ten stan lokalnie w JS:

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

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

Albo można zrobić odnośnika

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

Answer 3

this.dataset.index nie działa w IE. Spróbuj użyć this.getAttribute("data-index").

Answer 4

Jquery ma metodę data(), która działa również w testowanej wersji IE (IE8 i IE10).

Sprawdź dokumentację tutaj:

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

Answer 5

Powodem własnością dataset nie jest rozpoznawany przez starszych wersjach IE (w rzeczywistości wszystkie z nich z wyjątkiem IE11 +) jest fakt, że został on wprowadzony w HTML5, które te wersje nie obsługują lub obsługują go tylko częściowo.

W celu uzyskania wartości obiektu i, można użyć czystego js jak

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

lub prostszy za pomocą metody getAttribute():

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

lub jQuery (V 1.2.3+):

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