Question

在元素上调用jquery＆＃39; s css("display")时，我得到了不可预知的结果;有时它是flex，有时它是block。奇怪的是，只有当我使用jquery＆＃39; show / hide时才会出现此错误，并且错误发生在大约50％的时间。更奇怪的是，我在 hide之前看到了这些结果甚至运行。

更新：它似乎也与this google webfont css我联系在一起。如果我删除字体问题就会消失。这一切都很奇怪。

这是我的代码的简化：

JS：

$(document).ready(function () { console.log("1 display: " + $("#foo").css("display")); $("#foo").hide(); console.log("2 display: " + $("#foo").css("display")); $("#foo").show(); console.log("3 display: " + $("#foo").css("display")); });

HTML：

<!DOCTYPE html> <html> <head> <title>Test</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/JavaScript" src="script.js"></script> <link href='http://fonts.googleapis.com/css?family=Forum' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="foo" class="centerer"> <p>Hello!</p> </div> </body> </html>

的CSS：

#foo { background: white url("bg.jpg") center no-repeat; background-size: 100vw auto; } .centerer { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; }

应该打印出正确的行为：

1 display: flex 2 display: none 3 display: flex

但我在50％的时间里看到的是：

1 display: block 2 display: none 3 display: block

关于可能导致此问题的任何想法？我想知道为什么。

Answer 1

在您的错误输出中，您显示的初始值为阻止。这不是show方法的错误。

你确定你的脚本是在CSS计算后执行的吗？

检查您的文档结构：

<!DOCTYPE html>
<html>
  <head>
    <!-- css include/import -->
  </head>
  <body>
    <!-- html body -->
    <!-- script include/import -->
  </body>
</html>

Answer 2

为了使JQuery hide（）和show（）函数正常工作（保持原始显示值），元素应该是调用函数时的DOM的一部分。也许Google Webfonts会暂时从DOM中卸载您的内容......

问题可以这样再现：

https://jsfiddle.net/u442nsko/1

#foo {
    display: flex;
}

$(document).ready(function () {

    var my = $("<div id='foo'>......</div>")
    console.log("1 display: " + my.css("display"));
    my.hide();
    console.log("2 display: " + my.css("display"));
    my.show();
    console.log("3 display: " + my.css("display"));
    $("body").append(my);
    console.log("4 display: " + my.css("display"));
});

display：flex随机变成display：block with jquery hide / show和google webfont

2 个答案: