Problema utilizzando elem.dataset con IE e JSFiddle

Question

In questo JSFiddle che ho creato su Chrome, trovo che non è possibile lavorare su IE (sto usando IE9). Qualsiasi motivo a riguardo: 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 non supporta elem.dataset. Dovresti ottenere esplicitamente l'attributo: http://jsfiddle.net/ZSB67/1/.

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

In futuro, si potrebbe desiderare premendo F12 e guardando la console per gli errori, dal momento che ha detto cosa stava causando il problema qui.

Answer 2

dataset sembra non definito in IE. Questa è probabilmente la principale fonte del problema. Tutto il resto funziona perfettamente su IE9 64 bit.

Si potrebbe semplicemente archiviare quello stato a livello locale in JS:

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

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

Oppure si può fare una ricerca

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

Answer 3

this.dataset.index non funziona su IE. Prova a utilizzare this.getAttribute("data-index").

Answer 4

Jquery ha un metodo data() che funziona anche nella versione IE che ho testato (IE8 e IE10).

Controllare la documentazione qui:

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

Answer 5

Il motivo per cui la proprietà dataset non è riconosciuto da vecchie versioni di IE (in realtà tutti loro, tranne IE11 +) è il fatto che è stato introdotto in HTML5 che quelle versioni non supportano o supportano solo parzialmente.

Per ottenere il valore di questa proprietà, si può usare js puri come

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

o più semplice utilizzando il metodo getAttribute():

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

o jQuery (v 1.2.3+):

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