Javascript 多次执行函数_Javascript

Javascript 多次执行函数

javascript

Javascript 多次执行函数,javascript,Javascript,我无法使以下代码正常工作。不幸的是，谷歌没有提供帮助我想要的是，该功能立即执行，然后在加载所有内容后再次执行（对于mobile Chrome中的数据保存选项来说似乎更安全），并且在调整窗口大小时再次执行我非常简化了代码，因此很容易立即看到正在发生的事情，而代码基本上仍然做它应该做的事情但是，例如classList.toggle在Firefox和Chrome中不起作用，它没有给出类，只有一个空的class属性。IE 11正确地给出了这个类谢谢你的提示 <!DOCTYPE html&g

我无法使以下代码正常工作。不幸的是，谷歌没有提供帮助

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

我非常简化了代码，因此很容易立即看到正在发生的事情，而代码基本上仍然做它应该做的事情

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

谢谢你的提示

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Test</title>
<style>

* {
    margin: 0;
    padding: 20px;
    border: none;
    }

p {
    color: black;
    }

body.state-2 p {
    color: red;
    }

h2 {
    position: static;
    }

@media only screen and (max-width: 1250px) {

h2 {
    position: relative;
    }

}

</style>

<body>

<h2>Headline</h2>

<p>Hello</p>

<script>

function toggleState()
{
    var toggle = document.querySelector('h2');
    var container = document.querySelector('body');
    if (window.getComputedStyle(toggle,null).getPropertyValue('position') == 'relative')
    {
        toggle.setAttribute('role', 'button');
    }
    else
    {
        toggle.removeAttribute('role');
    }
    toggle.addEventListener('click', function()
    {
        container.classList.toggle('state-2');
    }
    );
}

toggleState();
window.onload = toggleState;
window.onresize = toggleState;

</script>


试验
* {
保证金：0；
填充：20px；
边界：无；
}
p{
颜色：黑色；
}
body.state-2p{
颜色：红色；
}
氢{
位置：静态；
}
@仅介质屏幕和（最大宽度：1250px）{
氢{
位置：相对位置；
}
}
大字标题
你好
函数toggleState（）
{
var toggle=document.querySelector（'h2'）；
var container=document.querySelector（'body'）；
if（window.getComputedStyle（toggle，null）.getPropertyValue（'position'）=='relative'）
{
toggle.setAttribute（'role'，'button'）；
}
其他的
{
toggle.removeAttribute（“角色”）；
}
toggle.addEventListener（'click'，function（）
{
container.classList.toggle（'state-2'）；
}
);
}
切换状态（）；
window.onload=切换状态；
window.onresize=切换状态；

似乎您正在为每个调整大小事件添加一个新的侦听器：

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

函数中的局部变量中。

因此，每次执行

toggleState（）

时，似乎都会添加另一个事件监听器。因此，根据您的代码，它会立即添加两个事件侦听器，然后在窗口调整大小时添加另一个侦听器。啊，这很有意义。在以前的版本中，我使用了onclick和onkeydown而不是addEventListener，这是一种更好的方法吗？或者有没有办法让发布的代码正常工作？只需添加一次侦听器。所以remvoe

toggleState（）

和

window.onresize=toggleState但保持window.onload=toggleState