Problema al utilizar elem.dataset con IE y JSFiddle

Question

En este JSFiddle que creé en Chrome, me parece que no puedo trabajar en IE (estoy usando IE9). Cualquier motivo relacionado con esto: 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 no soporta elem.dataset. Tendría que obtener explícitamente el atributo: http://jsfiddle.net/ZSB67/1/.

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

En el futuro, es posible que desee presionando F12 y mirando a la consola de errores, ya que dijo lo que estaba causando el problema aquí.

Answer 2

dataset parece no estar definido en IE. Esa es probablemente la principal fuente del problema. Todo lo demás funciona bien en IE9 64 bit.

Se podía almacenar ese estado a nivel local en JS:

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

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

O bien, puede hacer una búsqueda

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

Answer 3

this.dataset.index no funciona en IE. Intenta usar this.getAttribute("data-index").

Answer 4

Jquery tiene un método data() que también funciona en la versión IE que he probado (IE8 e IE10).

Consulte la documentación aquí:

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

Answer 5

La razón por la propiedad dataset no es reconocido por versiones antiguas de IE (en realidad todos ellos, excepto EI11 +) es el hecho de que se introdujo en HTML5, que esas versiones no lo admiten ni lo admiten solo parcialmente.

el fin de obtener el valor de esta propiedad, se puede utilizar js puros como

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

o simplier utilizando el método getAttribute():

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

o jQuery (v 1.2.3+):

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