Проблема с использованием elem.dataset с IE и JSFiddle

В этом JSFiddle, который я создал в Chrome, я обнаружил, что он не может работать в IE (я использую IE9). Любая причина в этом: 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);
    };
}

Ответы

Ответ 1

IE <10 не поддерживает elem.dataset. Вам нужно явно получить атрибут: http://jsfiddle.net/ZSB67/1/.

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

В будущем, возможно, вы захотите нажать F12 и посмотреть на консоль на наличие ошибок, так как там указано, что является причиной проблемы.

Ответ 2

this.dataset.index не работает в IE. Попробуйте использовать this.getAttribute("data-index").

Ответ 3

Причина, по которой свойство dataset не распознается более старыми версиями IE (фактически все из них, кроме IE11 +), является тем фактом, что он был введен в HTML5, но эти версии не поддерживают или поддерживают его только частично.

Чтобы получить это значение свойства, можно использовать чистые js, такие как

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

или проще, используя метод getAttribute():

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

или jQuery (v 1.2.3 +):

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

Ответ 4

dataset в IE выглядит undefined. Вероятно, это главный источник проблемы. Все остальное отлично работает на 64-разрядной версии IE9.

Вы можете просто сохранить это состояние локально в JS:

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

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

Или вы можете выполнить поиск

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

Ответ 5

JQuery имеет метод data(), который также работает в версии IE, которую я тестировал (IE8 и IE10).

Проверьте документацию здесь:

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