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に存在する前にコードがスクリプトを実行しているためです。

2つの選択肢があります。

  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 に答える