Problema nell’utilizzo di elem.dataset con IE e JSFiddle

In questo JSFiddle che ho creato su Chrome, trovo che non è ansible lavorare su IE (sto usando IE9). Qualsiasi ragione per questo: http://jsfiddle.net/ZSB67/ .

var backImage = [ "http://sofit.miximages.com/javascript/site-closed.wikispaces.com/144018347/RedBackground.bmp", "http://sofit.miximages.com/javascript/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); }; } 

IE non supporta elem.dataset . Dovresti ottenere esplicitamente l’attributo: http://jsfiddle.net/ZSB67/1/ .

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

In futuro, potresti voler premere F12 e cercare nella console errori, dal momento che ha detto che cosa stava causando il problema qui.

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

Il motivo per cui la proprietà del dataset non viene riconosciuta dalle versioni precedenti di IE (in realtà tutti tranne IE11 +) è il fatto che è stato introdotto in HTML5 che tali versioni non supportano o supportano solo parzialmente.

Per ottenere il valore di questa proprietà, si può usare js pure 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")); }) 

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

Puoi semplicemente archiviare quello stato localmente in JS:

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

O puoi fare una ricerca

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

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

Controlla la documentazione qui:

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