为什么我用来显示/隐藏div的javascript在IE中不工作?

Question

我修改了@dinindu在stackoverflow上发现的一个脚本，它似乎在除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之类的在线babel转译器。Io/repl，在这里你也可以转换代码，而不需要知道如何自己编译它。