时间戳

首页 > 解决方案 > 函数不会更改 IE10-11 中元素的文本

javascript - 函数不会更改 IE10-11 中元素的文本

问题描述

我正在创建一个支持 IE10-11 的布局。我的大部分函数都可以工作，但 .text jQuery 方法什么也不做。当我单击页面上的按钮时，某些元素的文本应根据传递给我的函数的参数而更改。编码：

const currenciesChars = new Map([
  ['rub', '₽'],
  ['usd', '$'],
  ['eur', '€']
])

const currenciesNote = new Map([
  ['rub', 'Руб'],
  ['usd', 'USD'],
  ['eur', 'EUR']
])

function changeCurrency(currency) {
  $(".currency").text(currenciesChars.get(currency))
  $(".currency-note").text(currenciesNote.get(currency))
}

changeCurrency('usd');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="currency"></div>
<div class="currency-note"></div>

控制台不会产生一个错误。但是，如果您添加该功能，则该功能有效alert (123)，您可以验证这一点。我的代码有什么问题？

标签： javascriptjqueryinternet-explorer

解决方案

如上所述，IE11 不支持新的 Map(arguments)。你需要在 IE中使用@babel/polyfill来填充它：

  1. 通过运行以下命令安装@babel/polyfill：

    npm install --save @babel/polyfill

  2. 在@babel/polyfill npm 版本中，有一个文件@babel/polyfill/dist/polyfill.js. 你可以在所有编译的 Babel 代码之前包含它。您可以将其添加到已编译的代码中，也可以将其包含在<script>它之前。

  3. 要使您的代码在 IE 10 中运行，您还需要更改const为var.

工作代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="node_modules/@babel/polyfill/dist/polyfill.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="currency"></div>
    <div class="currency-note"></div>
    <script>           
        var currenciesChars = new Map([
            ['rub', '₽'],
            ['usd', '$'],
            ['eur', '€']
        ])

        var currenciesNote = new Map([
            ['rub', 'Руб'],
            ['usd', 'USD'],
            ['eur', 'EUR']
        ])

        function changeCurrency(currency) {
            $(".currency").text(currenciesChars.get(currency))
            $(".currency-note").text(currenciesNote.get(currency))
        }    
        changeCurrency('usd');
    </script>
</body>
</html>

推荐阅读