jquery - 使用 MVC 从脚本和/或 Razor 模型 View 中显示和隐藏元素

Question

我在 Razor View 中有一个元素:

<div class="label">When? *</div>

我需要根据 ModeView 条件在 View 中显示:

<div id="label" class="label" style="@(Model.SearchedServiceId == 14 ? "display:block" : "")">When? *</div>

但我需要能够对 jQuery 隐藏它:

$("#label").fadeOut();

我定义的样式如下:

.label {
    display: none;
}

问题是，当元素中的条件为 true，并且将 display:block 添加到元素中时，我无法从 jQuery 中隐藏它:

$("#label").fadeOut();

没有隐藏该元素。

Answer 1

通过使用样式

style="@(Model.SearchedServiceId == 14 ? "display:block" : "")"

您可以覆盖所有类，因为内联样式比 css 类 id 等更强大。而不是应用以下代码来样式在类中回显它，如下所示

class="@(Model.SearchedServiceId == 14 ? "superClass" : "")"

然后在你的CSS文件中定义什么是父类(super class)

.superClass{
  display:block;
}

通过这种方式，您不需要用 important 覆盖，因此您可以毫无问题地使用 fadeOut。

如果将其显示为 block 仍然会导致问题，您可以在淡出之前使用 .removeClass('superClass');