无法隐藏我的部分页面，但相同的代码适用于 JSFiddle

Question

我想使用 jquery 中的 toggle()（或 hide()），但它不起作用。

我知道我使用的语法还不错。它适用于jsFiddle，但我无法使其适用于剃刀视图。

这是我想使用的代码：

    <script type="text/javascript">
        $(".hidden").toggle();
    </script>

@Using Html.BeginForm(IsPost)
@Html.ValidationSummary(True)
@<fieldset>
    <legend>contact</legend>
    <table>
        <tr>
        <td><h3>@Html.Raw("Données personnelles : ")</h3></td>
        </tr>

        <tr>
        <td>@Html.Raw("Nom : ")</td>
        <td>@Html.EditorFor(Function(model) model.nom)
        @Html.ValidationMessageFor(Function(model) model.nom)</td>

        <td>@Html.Raw("Prénom : ")</td>
        <td>@Html.EditorFor(Function(model) model.prenom)
        @Html.ValidationMessageFor(Function(model) model.prenom)</td>
        </tr>

        <tr>
        <td class="hidden">@Html.Raw("Date de naissance : ")</td>
        <td>@Html.EditorFor(Function(model) model.dateNaissance)
        @Html.ValidationMessageFor(Function(model) model.dateNaissance)</td>
        </tr>

    </table>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
End Using

生成的html代码如下：

 <tbody><tr>
        <td><h3>Données personnelles : </h3></td>
        </tr>

        <tr>
        <td>Nom : </td>
        <td><input class="text-box single-line" id="nom" name="nom" value="" type="text">
        <span class="field-validation-valid" data-valmsg-for="nom" data-valmsg-replace="true"></span></td>



        <td>Prénom : </td>
        <td><input class="text-box single-line" id="prenom" name="prenom" value="" type="text">
        <span class="field-validation-valid" data-valmsg-for="prenom" data-valmsg-replace="true"></span></td>
        </tr>

        <tr>
        <td class="hidden">Date de naissance : </td>
        <td><input class="text-box single-line" id="dateNaissance" name="dateNaissance" value="" type="text">
        <span class="field-validation-valid" data-valmsg-for="dateNaissance" data-valmsg-replace="true"></span></td>
        </tr>

以下是与这些跨度相关的 CSS：

        /* Styles for validation helpers
        -----------------------------------------------------------*/
        .field-validation-error {
            color: #ff0000;
        }

        .field-validation-valid {
            display: none;
        }

        .input-validation-error {
            border: 1px solid #ff0000;
            background-color: #ffeeee;
        }

        .validation-summary-errors {
            font-weight: bold;
            color: #ff0000;
        }

        .validation-summary-valid {
            display: none;
        }

        /* Styles for editor and display helpers
        ----------------------------------------------------------*/
        .display-label, 
        .editor-label {
            margin: 1em 0 0 0;
        }

        .display-field, 
        .editor-field {
            margin: 0.5em 0 0 0;
            position:relative;
            left:5px;
        }

        .text-box {
            width: 30em;
        }

        .multiline
        {
            height: 6.5em;
            position:relative;
            left:5px;
        }

        .tri-state {
            width: 6em;
        }
        .display-field
        {
            font-size:1.5em;
        }

我可以做些什么来绕过所有这些东西来隐藏页面的某些部分？

Answer 1

如果您的代码确实如所引用的那样，那么它在 jsfiddle 而不是在您的代码中运行的原因是 jsfiddle 在 HTML 之后包含了您的脚本 ，但您的代码正在运行脚本 之前元素存在于DOM中。

你有两个选择：

1. 将您的脚本放在页面的end，就在结束</body> 标记之前。我会推荐这个，as do the YUI team。

2. 使用 jQuery 的 ready 函数（人们经常使用令人困惑的快捷方式，即 passing a function into the jQuery function，通常别名为 $）来安排您的代码在“DOM 就绪”上运行。

Answer 2

 <script type="text/javascript">
 $(document).ready(function(){
        $(".hidden").toggle();
});
    </script>

Answer 3

我认为不需要为此使用 Javascript（或 jQuery）。如果您希望最初隐藏类 hidden 的元素，只需使用 CSS 声明：

.hidden {
    display: none;
}