Question

我无法正常使用以下代码。不幸的是谷歌没有帮助。

我想要的是该功能立即执行，然后在所有内容加载后再次执行（对于移动Chrome中的数据保存选项似乎更安全），并且只要窗口调整大小，就会再次执行。

我极度减少了代码，因此很容易看到发生了什么，而代码仍然基本上做了它应该做的事情。

但是例如classList.toggle在Firefox和Chrome中不起作用，它没有给出类，只有空类属性。 IE 11正确地给出了类。

感谢任何提示！

intptr_t

Answer 1

似乎你在每个resize事件上添加一个新的监听器：

toggle.addEventListener('click', function(){...});

你也一次又一次地找到这些元素：

var toggle = document.querySelector('h2');
var container = document.querySelector('body');

您可以使用闭包来解决这两个问题：

function toggleState(toggle) {
  if (window.getComputedStyle(toggle, null).getPropertyValue('position') == 'relative') {
    toggle.setAttribute('role', 'button');
  }
  else {
    toggle.removeAttribute('role');
  }
}

function setup() {
  var toggle = document.querySelector('h2');
  var container = document.querySelector('body');

  toggle.addEventListener('click', function () {
    container.classList.toggle('state-2');
  });
  window.addEventListener('load', function() { toggleState(toggle) });
  window.addEventListener('resize', function() { toggleState(toggle) });
}

setup();

通过这种方式，只创建一次侦听器，并将对元素的引用保存在setup函数内的局部变量中。

多次执行功能

1 个答案: