如何用jQuery解除CSHTML(Razor)元素的no-display隐藏使其显示？

嘿，我之前也碰到过一模一样的情况！大概率是no-display类的CSS优先级比jQuery动态添加的行内样式更高，导致.show()没生效。咱们一步步排查解决：

先确认问题根源 #

首先打开浏览器开发者工具（F12），查看你的no-display类的CSS定义，是不是长这样：

.no-display {
  display: none !important;
}

如果带了!important，那jQuery的.show()方法添加的display: block行内样式是干不过它的——这就是问题所在！

解决方案（按推荐程度排序） #

1. 直接移除no-display类（最推荐） #

既然元素是靠这个类隐藏的，直接移除它就能恢复默认显示状态，完全符合CSS的设计逻辑：

$(uiElements.divConfirmationMessage).removeClass('no-display');

之后如果需要再次隐藏，只要再加回这个类就行：

$(uiElements.divConfirmationMessage).addClass('no-display');

2. 强制设置display样式（应急用） #

如果因为某些原因必须保留no-display类，那可以用.css()方法直接覆盖样式：

// 针对p标签，默认display是block，直接设置即可
$(uiElements.divConfirmationMessage).css('display', 'block');

// 如果no-display类带了!important，就得用cssText强制覆盖
$(uiElements.divConfirmationMessage).css('cssText', 'display: block !important;');

3. 检查选择器是否正确 #

有时候不是样式的问题，而是你选中的元素根本不对！先在控制台打印一下选择结果，确认是否正确获取到了元素：

console.log($(uiElements.divConfirmationMessage));

如果输出的jQuery对象长度是0，说明选择器有误：

• 检查uiElements.divConfirmationMessage对应的是不是正确的选择器（比如#divConfirmationMessage）
• 确保代码是在DOM加载完成后执行的，比如包裹在$(document).ready()里：

  $(document).ready(function() {
    // 你的代码放在这里
    $(uiElements.divConfirmationMessage).removeClass('no-display');
  });
  

4. 检查父元素状态 #

还有一种可能：这个p标签的父元素被隐藏了！就算你把p标签显示出来，父元素隐藏的话它还是看不到。用开发者工具检查一下父元素的display属性，确保父元素是可见的。

内容的提问来源于stack exchange，提问作者Hugh Veal