Функция не меняет текст элемента в IE10-11 - PullRequest
Новая
       13

Функция не меняет текст элемента в IE10-11

0 голосов
/ 24 марта 2020

Я создаю макет с поддержкой 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) к ней, вы можете проверить это. В чем проблема моего кода?

1 Ответ

0 голосов
/ 25 марта 2020

Как указано выше, новая карта (аргументы) не поддерживается в IE11. Вам нужно использовать @ babel / polyfill , чтобы заполнить его в IE:

  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>
...