1

我想使用 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;
        }

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

4

3 回答 3

5

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

你有两个选择：

  1. 将您的脚本放在页面末尾，就在结束</body>标记之前。我会推荐这个，YUI 团队也是如此。

  2. 使用 jQuery 的ready函数（人们经常使用令人困惑的快捷方式，它只是将一个函数传递给函数jQuery，通常别名为$）来安排您的代码在“DOM 就绪”上运行。

于 2012-04-24T11:33:03.500 回答
3 
 <script type="text/javascript">
 $(document).ready(function(){
        $(".hidden").toggle();
});
    </script>
于 2012-04-24T11:30:50.873 回答
1

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

.hidden {
    display: none;
}
于 2012-04-24T11:32:49.380 回答