时间戳

首页 > 解决方案 > 样式显示 none 未在函数中触发

javascript - 样式显示 none 未在函数中触发

问题描述

我有一个功能：

$(".left_filter_menu").on("click", ".platforms", function() {
  document.getElementById("loaderContainer").style.display = "block";
  console.log(document.getElementById("loaderContainer"));

  areAllPlatformSwitchesChecked();

  document.getElementById("loaderContainer").style.display = "none";
  console.log(document.getElementById("loaderContainer"));
});

这应该显示我的 loader div，执行功能areAllPlatformSwitchesChecked然后隐藏 loader div，但它根本不显示 loader 。我添加了console.log看看为什么会这样，输出是：

(index):731 <div id=​"loaderContainer" style=​"display:​ none;​">​…​&lt;/div>​
(index):734 <div id=​"loaderContainer" style=​"display:​ none;​">​…​&lt;/div>​

当我摆脱hide零件时，它会显示 loader div。有任何想法吗？

标签： javascriptjquery

解决方案

我不知道这实际上是你的问题，但它通常是值得尝试的。

在我看来，元素将设置为可见，执行同步方法，然后将元素设置回隐藏，所有这些都在 UI 有机会更新之前完成。您可以简单地通过给浏览器一个机会来强制更新 UI，并使用setTimeout()阻塞代码，就像这样......

$(".left_filter_menu").on("click", ".platforms", function() {

    document.getElementById("loaderContainer").style.display = "block";

    setTimeout(function() {
        areAllPlatformSwitchesChecked();
        document.getElementById("loaderContainer").style.display = "none";
    }, 1);
}

试试看。老实说，这是在黑暗中开枪，但在你的情况下，我已经多次面对它，值得一试。让我知道它是否有效。如果没有我会删除这个。

推荐阅读