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之前。

您有两种选择：

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

使用jQuery的ready函数（人们经常使用令人困惑的快捷方式，它只是passing a function into the jQuery function，通常别名为$）来安排代码运行关于“DOM ready”。

Answer 2

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

Answer 3

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

.hidden {
    display: none;
}

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

3 个答案: