javascript - 试图从显示 : hidden to display: block 更改 jquery 元素

标签 javascript jquery html css

我刚开始使用 Jquery。目前,errorSummaryDiv 元素未显示。我正在尝试编写代码以将元素从 display: none 更改为 display: block 或完全删除 display:none 属性。出于某种原因,我无法使用以下代码将我的 css 从隐藏更改为 block 。我做错了什么?我知道 if 语句评估为真,因为“hi”被记录在控制台中。你必须做一些我想念的特别的事情吗?先感谢您。

HTML:

<div class = "errorSummaryDiv">
    <h3>You have the following errors: </h3>
    <ul id="errors"></ul>
</div>

J查询/JS:

if($('#errors').children().length === 0) {
        console.log('hi');
        $('div.errorSummaryDiv').css('display', 'block');

    }   

CSS:

.errorSummaryDiv {
    display: none;
    width: 55%;
    background-color: #FFF69E;
    border-radius: 4px;
    color: #555;
    margin: 0 auto;
}

div {
    display: block;
}

最佳答案

像这样使用 jquery 的 hide/show 方法:

$('.errorSummaryDiv').hide();  // To hide

$('.errorSummaryDiv').show();  // To show

说明: hide() 会将 display:none css 放在调用它的元素上,反之亦然

Working Fiddle

注意:不要忘记在代码中包含 jquery 库

关于javascript - 试图从显示 : hidden to display: block 更改 jquery 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42989791/

相关文章:

javascript - 在 jQuery 中获取元素包含 span 标签之前的文本

javascript - ASP.Net 中的是/否消息框

javascript - 函数内的函数内的 JS 函数等等

javascript - Jquery 停止提交并从表单中获取数据

jquery - Bootstrap 进度条动画使用 50% CPU

html - Bootstrap 水平表单元素有 -15px 边距

javascript - 元素及其父元素指定了 ng-click,两者都被称为

javascript - 如何让这个冗长的 jQuery 变得优雅呢?

jQuery 选择的选项仅在调试中工作

HTML:如何简单地缩进表单?