Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/383.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript类列表添加和删除在非全局执行上下文中不起作用_Javascript - Fatal编程技术网

Javascript类列表添加和删除在非全局执行上下文中不起作用

Javascript类列表添加和删除在非全局执行上下文中不起作用,javascript,Javascript,我试图通过创建一个包含3个exec上下文的堆栈,来说明执行堆栈如何在Javascript上工作。全局、executionA和executionB。为此,我构建了一组嵌套的div,并添加了一个displayNone类 函数应在运行时使用classList删除displayNone类。删除('displayNone'),并在设置超时后,使用classList.add('displayNone')再次插入该类 但出于某种原因,它不起作用。如果我将classList命令放到全局上下文中,它就会正常工作

我试图通过创建一个包含3个exec上下文的堆栈,来说明执行堆栈如何在Javascript上工作。全局、executionA和executionB。为此,我构建了一组嵌套的div,并添加了一个displayNone类

函数应在运行时使用classList删除displayNone类。删除('displayNone'),并在设置超时后,使用classList.add('displayNone')再次插入该类

但出于某种原因,它不起作用。如果我将classList命令放到全局上下文中,它就会正常工作

在HTML下面:

<button onclick="a()">Run function a</button>
<br>

<div class="global displayNone">
  <p>Este bloco está aparecendo devido a função executada no global execution context que removeu a classe displayNone desta div</p>
  <div class="executionA displayNone">
    <p>Este bloco só vai aparecer durante a execução do execution context da função A.</p>
    <div class="executionB displayNone">
      <p>Este bloco só vai aparecer durante a execução do execution context da função B.</p>
    </div>
  </div>
</div>

下面是CodePen上的示例,它按应有的方式工作,而不是按您的期望工作。就在
rem(execA)
rem(execB)
下,您有
add(execA)
add(execB)
,因此您可以有效地同时删除和添加类。这就是为什么你们在屏幕上看不到任何变化


add(execA)
add(execB)
包装在
setTimeout()
中,然后查看它是如何工作的。

它按它应该的方式工作,而不是按您的预期工作。就在
rem(execA)
rem(execB)
下,您有
add(execA)
add(execB)
,因此您可以有效地同时删除和添加类。这就是为什么你们在屏幕上看不到任何变化


add(execA)
add(execB)
包装在
setTimeout()中,然后查看其工作原理。

mmm。。。如果你想检查的话,就在CodePen上试过。尚未达成协议。您对所有3个函数使用相同的超时3000,因此它们都在同一时间运行。@PierBottero Try
setTimeout(rem,3000,execA);setTimeout(添加,6000,execA)嗯。。。如果你想检查的话,就在CodePen上试过。尚未达成协议。您对所有3个函数使用相同的超时3000,因此它们都在同一时间运行。@PierBottero Try
setTimeout(rem,3000,execA);setTimeout(添加,6000,execA)
var content=document.getElementsByClassName('content')[0];
var globalDiv=document.getElementsByClassName('global')[0];
var execA=document.getElementsByClassName('executionA');
var execB=document.getElementsByClassName('executionB');

function rem(x){
  x[0].classList.remove('displayNone');
}
function add(x){
  x[0].classList.add('displayNone');
}


globalDiv.classList.remove('displayNone');
content.innerHTML="output results here";

function b(){
  content.innerHTML="function b executed";
rem(execB);
add(execB);
}

function a(){
  content.innerHTML="function a executed";
rem(execA);
  setTimeout(b,3000);
add(execA);
}