@ligisayan

Как переписать функцию map js для возможности использования в ie11?

Всем привет! Обнаружил, что код ES6 map() и `` не работают в IE 11 Как это участок кода переписать кроссбраузерно или какой использовать можно polyfill для этого?

jQuery.noConflict();
jQuery(document).ready(function($) {

      const keys = ["hard", "soft"];

      document.head.appendChild((style => {
        style.textContent = keys.map(key => `
			#main-slider-wrapper .slider-key button[data-key="${key}"] {
				background-image:
					url(img/${key}-key-slider.png)
			}

			#main-slider-wrapper[data-key="${key}"] .slider img[src*="${key}-key"] {
				opacity: 1;
			}

			#main-slider-wrapper[data-key="${key}"] .slider-key button[data-key="${key}"] {
				filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5));
				-webkit-filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,255,255,0.5));
			}
		`).join("\n\n");
        return style;
      })(document.createElement("style")));

      document.addEventListener("click", ({
        target
      }) => {
        if (!target.matches(
            `${keys.map(k => `[data-key="${k}"]`).join(", ")}, .slick-arrow`
          )) return;

        const root = target.closest("#main-slider-wrapper");
        const key = target.dataset.key;
        const index = keys.indexOf(key);
        root.dataset.key = key;

        for (const arrow of root.querySelectorAll(".slick-arrow")) {
          arrow.dataset.key = keys[
            (keys.length + (
              arrow.classList.contains("left") ? -1 : 1
            ) + index) % keys.length
          ];
        }
      });

      for (const e of document.querySelectorAll(`[data-key="${keys[0]}"]`))
        e.click();
});
  • Вопрос задан
  • 412 просмотров
Решения вопроса 1
@Interface
Вы используете es6. => ` вот это все. Это синтаксис - полифил не поможет.

Вставьте код сюда: https://babeljs.io/repl/
бабель его преобразует к es5, например.

Почитайте про: es5, es6 (es2015), babel, транспайлеры, отличия между транспайлером и полифилом
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
Если верить MDN, то поддержка с ie9+, но если всё-таки не работает, то в этой же статье есть полифил
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы