首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript classList添加和删除在非全局执行上下文中不起作用

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

Stack Overflow用户
提问于 2018-10-11 06:50:12
回答 1查看 694关注 0票数 0

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

这些函数应该在运行时使用classList.remove(' displayNone ')删除displayNone类,并在setTimeout之后使用classList.add('displayNone')再次插入该类。

但由于某些原因,它不起作用。如果我把classList命令带到全局上下文中,它就能正常工作。

在HTML下面:

代码语言:javascript
复制
<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>

下面是JS代码:

代码语言:javascript
复制
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);
}

以下是CodePen https://codepen.io/PierBotteroWeb/pen/OBmPPY?editors=1010上的示例

EN

回答 1

Stack Overflow用户

发布于 2018-10-11 06:55:27

它像它应该的那样工作,只是不是你所期望的那样。就在rem(execA)rem(execB)下,你有add(execA)add(execB),所以你可以同时删除和添加类。这就是为什么你在屏幕上看不到任何变化。

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52749824

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档