主页 / 问题 / 817970
Accepted
Денис
Asked:2020-04-23 13:39:54 +0800 CST2020-04-23 13:39:54 +0800 CST

IE中的动画脚本

  • 772

再会！该脚本适用于除 IE 之外的任何地方。帮助我理解。他不喜欢什么？

const buttons = document.querySelectorAll(`button[data-modal-trigger]`);

for(let button of buttons) {
modalEvent(button);
}

function modalEvent(button) {
button.addEventListener('click', () => {
    const trigger = button.getAttribute('data-modal-trigger');
    const modal = document.querySelector(`[data-modal=${trigger}]`);
    const contentWrapper = modal.querySelector('.content-wrapper');
    const close = modal.querySelector('.close');

    close.addEventListener('click', () => modal.classList.remove('open'));
    modal.addEventListener('click', () => modal.classList.remove('open'));
    contentWrapper.addEventListener('click', (e) => e.stopPropagation());

    modal.classList.toggle('open');
});
}

完整的例子在这里

javascript

1 个回答

  1. Best Answer

    以下是我从代码中 IE 不支持的内容中发现的内容：

    1. 您正在使用来自 ES6的模板字符串中的引号 - `
    2. for-of结构
    3. 箭头函数
    4. 也替换为let和const，它们在 IE-11 中具有基本支持但不完全支持，因此将它们替换为var.

    这是修改后的代码：

    const buttons = document.querySelectorAll('button[data-modal-trigger]');
for(let i = 0; i<buttons.length; i++) {
    modalEvent(buttons[i]);
}

function modalEvent(button) {
button.addEventListener('click', function() {
    const trigger = button.getAttribute('data-modal-trigger');
    const modal = document.querySelector('[data-modal=' + trigger + ']');
    const contentWrapper = modal.querySelector('.content-wrapper');
    const close = modal.querySelector('.close');

    close.addEventListener('click', function() {modal.classList.remove('open')});
    modal.addEventListener('click', function() {modal.classList.remove('open')});
    contentWrapper.addEventListener('click', function(e) {e.stopPropagation()});

    modal.classList.toggle('open');
});
}

    以及 jsfiddle 上的完整代码： https ://jsfiddle.net/wur8gnpe/4/

    的确，动画现在在那里无法正常工作，但您需要查看浏览器的 css 支持。

    • 2

相关问题