IEとJSFiddleでelem.datasetを使用すると問題が発生する

Question

私はChromeで作成したこのJSFiddleでは、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); 
    }; 
} 

Answer 1

検索を行うことができます。明示的に属性を取得する必要があります：http://jsfiddle.net/ZSB67/1/。将来的には

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

、あなたはそれがここでの問題を引き起こしていたものと述べているので、F12を押すと、エラーのコンソールを見たい場合があります。

Answer 2

datasetはIEでは定義されていないようです。これはおそらく問題の主要な原因です。他のすべてはIE9 64ビットでうまく動作します。

あなただけのJSでローカルにその状態を保存することができます：

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

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

をそれとも、IEが elem.datasetをサポートしていません

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

Answer 3

this.dataset.indexはIEでは機能しません。 this.getAttribute("data-index")を使用してください。

Answer 4

Jqueryには、私がテストしたIEバージョン（IE8とIE10）でも動作するdata()メソッドがあります。

ここにドキュメントを参照してください：

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

Answer 5

をdatasetプロパティはIEの古いバージョン（IE11 +を除いて、それらの実際に全て）によって認識されない理由は、それがどのHTML5で導入されたという事実でありますこれらのバージョンでは、サポートされていないか、サポートされていません。

このプロパティの値を得るために、一つのgetAttribute（）メソッドを使用して

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

又はsimplierような純粋なJSを使用することができます。

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

またはjQueryの（Vを1.2.3+ ）：

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