以下“阅读更多”文本展开“ +/-”按钮脚本在Chrome中起作用,但在IE中不起作用。我可以看到一些线程说let现在应该可以在IE11中工作。谁能帮助我纠正此脚本在两种浏览器中都起作用的问题?
提前感谢!
<table>
<tr>
<td class="definition" data-keyword="dog">
<button onclick="expandMore('dog')" class="myBtn">+</button><strong>Definition of a dog</strong> a domesticated carnivorous mammal that typically has
<span class="threeDots"> ... </span>
<span class="hiddenText" style="display: none;"><br>a long snout, an acute sense of smell, non-retractable claws, and a barking, howling, or whining voice.</span>
</td>
<td>8 (3)(d)</td>
</tr>
</table>
<script>
function expandMore(keyword) {
let threeDots = document.querySelector(`.definition[data-keyword="${keyword}"] .threeDots`);
let hiddenText = document.querySelector(`.definition[data-keyword="${keyword}"] .hiddenText`);
let btnText = document.querySelector(`.definition[data-keyword="${keyword}"] .myBtn`);
if (threeDots.style.display === "none") {
threeDots.style.display = "inline";
btnText.textContent = "+";
hiddenText.style.display = "none";
} else {
threeDots.style.display = "none";
btnText.textContent = "-";
hiddenText.style.display = "inline";
}
}
</script>
我认为IE尚不支持模板文字。如果您查看:https://kangax.github.io/compat-table/es6/
将其更改为
let threeDots = document.querySelector('.definition[data-keyword="' + keyword + '"] .threeDots');
或使用Babel https://babeljs.io/进行转载>