javascript - 如何使用类隐藏元素；而不是在 JQuery 中使用 css 函数？

Question

解决方案中多次使用数据表。

在一个地方，我们遇到了需要隐藏数据表标题的要求:

<div id="DocTable_wrapper" class="dataTables_wrapper no-footer">
<div>
 <div class="dataTables_scroll">
  //Following is top div of head which is generated dynamically by datatables
  <div class="dataTables_scrollHead noDisplay" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
     <div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1188px; padding-right: 16px;">
       <table class="dataTable no-footer" role="grid" style="margin-left: 0px; width: 1188px;">
          <thead id="DocHeading">
          </thead> 

我在 dataTables_scrollHead 中添加了一个名为 noDisplay 的样式。

它包含:

noDisplay{
display:none !important;
}

我在 JQuery 中将其应用为:

$(".dataTables_scrollHead").addClass("noDisplay");

当我运行代码时，标题不会隐藏。 在 Firebug 中我可以看到样式名称。在 Firebug 中，当我尝试将类应用于其下面的 div 时；它没有被应用。

在firebug中，当我在样式标签中使用内联样式display:none时。它隐藏起来。

但是当我使用时

$(".dataTables_scrollHead").css('display', 'none');    

成功了。

为什么？

根据标准，我们不应该使用 .css 而是仅使用 addClass。有人请帮我使用 addclass 做同样的事情吗？

Answer 1

也许你的 CSS 中有一个拼写错误？

你的CSS:

noDisplay{
display:none !important;
}

你忘记了。:

.noDisplay{
display:none !important;
}

EXAMPLE