Javascript 在 IE 和 JSFiddle 中使用 elem.dataset 的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7127896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problem using elem.dataset with IE and JSFiddle
提问by 0x499602D2
In this JSFiddle I created on Chrome, I find that it's unable to work on IE (I'm using IE9). Any reason as to this: http://jsfiddle.net/ZSB67/.
在我在 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);
};
}
回答by pimvdb
IE < 10 does not support elem.dataset. You'd need to explicitly get the attribute: http://jsfiddle.net/ZSB67/1/.
IE < 10 不支持elem.dataset. 您需要明确获取属性：http: //jsfiddle.net/ZSB67/1/。
changeBGImage(this.getAttribute('data-index'));
In the future, you might want pressing F12 and looking at the console for errors, since it said what was causing the problem here.
将来，您可能希望按 F12 并查看控制台是否有错误，因为它说明了导致问题的原因。
回答by jfriend00
this.dataset.indexdoes not work on IE. Try using this.getAttribute("data-index").
this.dataset.index不适用于 IE。尝试使用this.getAttribute("data-index").
回答by Az.
The reason why the datasetproperty is not recognized by older versions of IE (actually all of them except IE11+) is the fact that it was introduced in HTML5 which those versions do not support or support it only partially.
dataset旧版本的 IE（实际上除了 IE11+ 之外的所有版本）无法识别该属性的原因是它是在 HTML5 中引入的，这些版本不支持或仅部分支持它。
In order to obtain this property's value, one can use pure js like
为了获得这个属性的值，可以使用纯js
changeBGImage(this.attributes.getNamedItem("data-index").value)
or simplier by using the getAttribute() method:
或者更简单地使用 getAttribute() 方法：
changeBGImage(this.getAttribute("data-index"))
or jQuery (v 1.2.3+):
或 jQuery (v 1.2.3+)：
$(".bg_swap").click(function(){
changeBGImage($(this).data("index"));
})
回答by cwallenpoole
datasetseems to be undefined in IE. That is probably the major source of the issue. Everything else works just fine on IE9 64 bit.
dataset在 IE 中似乎未定义。这可能是问题的主要来源。其他一切都在 IE9 64 位上正常工作。
You could just store that state locally in JS:
您可以将该状态本地存储在 JS 中：
for (var i = 0; i < buttons.length; i++)
register( i )
function register( i ){
button = buttons[i];
button.onclick = function() {
changeBGImage(i);
};
}
Or you can do a lookup
或者你可以做一个查找
for (var i = 0; i < buttons.length; i++)
button = buttons[i];
button.onclick = function() {
changeBGImage(this.getAttribute('data-index'));
};
}
回答by Besi
Jquery has a data()method which also works in the IE Version I have tested (IE8 and IE10).
Jquery 有一种data()方法也适用于我测试过的 IE 版本（IE8 和 IE10）。
Check the documentation here:
检查这里的文档：
