【问题标题】：Why isn't the element display property being redefined?为什么不重新定义元素显示属性？
【发布时间】：2021-05-03 15:36:40
【问题描述】：

问题是带有 layer 类的 div 元素被添加到 DOM，但没有显示，无论如何，我已将 display 属性设置为 flex 到类 layer

    $("#elem").click(function(e) {
            if (e.target.classList.contains("myClass")) {
                $("*").hide();
                $("body").prepend(`<div class="layer">Hey!</div>`);
            }
  });

.layer {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(55, 55, 55);
    height: 100vh;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="elem" class="myClass">click me</div>

【问题讨论】：

#elem 没有类 myClass
@ControlAltDel 哦，是的，这就是此处显示的示例中的情况。我会解决的
如果你不做 $("*").hide() 会显示带有 "layer" 类的 div 吗？
如果没有工作示例或代码 sn-p，很难看出问题出在哪里，可能会给您的元素一些大小和背景颜色，或者使用开发工具的检查元素看看为什么它不可见。
@ControlAltDel 确实如此

标签： javascript html jquery css display

【解决方案1】：

你的问题是

$("*").hide();

如果你把它改成

$("body *").hide();

或

$("#elem").hide();

它应该可以解决你的问题

【讨论】：

现在我遇到了另一个问题：我正在尝试处理对 .layer 元素的单击，但未调用单击处理事件。我执行以下操作： $(".layer").click(function() {console.log("You clicked it!")});在此脚本中对 #elem 的单击处理有效，但在 .layer 上的单击处理由于某些神秘原因不起作用。你能帮帮我吗？

【解决方案2】：

问题

您正在使用* 作为选择器。

选择器选择文档中的所有元素，包括html、head和body

解决方案

将$("*").hide() 替换为$("#elem").hide()

【讨论】：