为什么我以前 show/hide 的 javascript div 在 IE 中不起作用？

Question

我修改了我在@dinindu 发布的Whosebug 上找到的一个脚本，它似乎在除IE 之外的所有浏览器上都能完美运行，不幸的是，我们确实有一些客户仍在使用IE。关于 IE 的解决方法有什么想法吗？

我是一名技术作家，对javascript一无所知，所以请多多包涵。

这是我项目中的脚本：

function toggle_visibility(id) {
    const target = document.getElementById(id);
    if (!target) return;

    // Hide all other div elements.
    const divs = document.querySelectorAll('.div');
    for (const div of divs) {
    div.style.display = 'none';
}

  // Show selected one
target.style.display = 'block';
}

<div id="intro" class="div">
    <img src="../../Resources/Images/101-intro.jpg" title="Inventory Cycle" usemap="#map1" />
    <map id="map1">
        <area shape="rectangle" coords="480,506,564,522" dragDirection="0" href="#" onclick="toggle_visibility('transfer');" />
        <area shape="rectangle" coords="628,288,738,304" dragDirection="0" href="#" onclick="toggle_visibility('receive');" />
    </map>
</div>
<div id="transfer" class="div" style="display: none;">
    <img src="../../Resources/Images/101-transfer.jpg" title="Transfer" usemap="#map2" />
    <map id="map2">
        <area shape="circle" coords="961,36,15" dragDirection="0" alt="Back" href="#" onclick="toggle_visibility('intro');" />
    </map>
</div>
<div id="receive" class="div" style="display: none;">
    <img src="../../Resources/Images/101-receive.jpg" title="Supplier" usemap="#map3" />
    <map id="map3">
        <area shape="circle" coords="961,36,15" dragDirection="0" alt="Back" href="#" onclick="toggle_visibility('intro');" />
    </map>
</div>

代码基本只显示101-intro.jpg。单击图像的特定部分会隐藏图像并显示其他两个图像之一（101-transfer.jpg 或 101-receive.jpg）。单击 101-transfer.jpg 或 101-receive.jpg 的右上角将其隐藏并再次显示 101-intro.jpg。

Answer 1

您的脚本使用了 ES6 (EcmaScript 2015) 功能，这些功能在 IE11 或更低版本中不可用。我已经重写了你的函数以使用下面的旧 Javascript 版本，这应该在 IE11 中工作。

function toggle_visibility(id) {
    var target = document.getElementById(id);
    if (!target) return;

    // Hide all other div elements.
    var divs = document.getElementsByClassName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.display = 'none';
    }

    // Show selected one
    target.style.display = 'block';
}

一般情况下，可以使用babel等工具将ES6+代码转译成IE11兼容的ES5代码。

另外如果以后出现类似情况，可以使用babeljs.io/repl等在线babel转译器，这里也可以转码，不需要自己转译.

为什么我以前 show/hide 的 javascript div 在 IE 中不起作用？

Why does the javascript I used to show/hide divs not work in IE?

html

javascript

show-hide