在 IE 和 JSFiddle 中使用 elem.dataset 时出现问题答案

【问题标题】：Problem using elem.dataset with IE and JSFiddle在 IE 和 JSFiddle 中使用 elem.dataset 时出现问题
【发布时间】：2011-08-19 22:05:00
【问题描述】：

在我在 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);
    };
}

【问题讨论】：

我有四个超链接，其中包含一个 .bg_swap 类和一个按升序排列的数字索引（数据索引）。当我点击它们时，它们应该将与元素索引对应的页面背景设置为数组的索引（backImage）。我是 Chrome 浏览过 IE9 还是不行。
this.dataset 在 IE9 中显示为未定义，因此您的 onclick 处理程序甚至不会调用 changeBGImage()

标签： javascript

【解决方案1】：

IE elem.dataset。您需要明确获取属性：http://jsfiddle.net/ZSB67/1/。

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

将来，您可能希望按 F12 并查看控制台是否有错误，因为它会说明导致问题的原因。

【讨论】：

你成就了我的一天。感谢您的回答。为你 +1。
有关使用和支持的更多详细信息，请参阅 mozilla 开发者文档：developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

【解决方案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"));
})

【讨论】：

正确。我真的不明白为什么人们无论如何都需要支持过时的浏览器。 IE10及以下的使用是最大的。所有浏览器的 6.3%，这个低使用率包括 Edge 和 IE11，所以最多。 (!) 1.4% 的旧 IE 浏览器。编写这种向后兼容的代码是在浪费时间和金钱——尤其是因为所有主要浏览器都是免费的，并且具有自动免费更新。最后，无论如何，jQuery 修复了它。见：w3schools.com/browsers/browsers_stats.asp
这是在您的客户无法/不允许安装现代浏览器的情况下。例如，拥有过时计算机的国家机构。
@StanE 问题创建于 2011 年〜当时可能需要支持。 ;)
@GuilhermeNascimento 是的，你完全正确。我有时会错过约会，对不起。 :-)

【解决方案4】：

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);
    };
}

或者你可以做一个查找

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/

【讨论】：