0

2 つの関数セットを正しく動作させるのに問題があります。意図したとおりに動作する div を表示および非表示にする変更機能がありますが、ページをロードするときに window.onload 関数を正しく動作させることができず、.change 関数の動作に影響を与えません。

関数スクリプト:

<script src="~/Scripts/jquery-2.0.3.js"></script>
<script>

    $(function () {
        window.onload = function () {
            if ($("#SelectedGenderId").val() == "3") {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
            }
            if ($("#SelectedSettingId").val() == "1") {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        }

        $("#GenderId").change(function () {
            if ($("#GenderId").val() == 3) {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
            }
        });

        $("#SettingId").change(function () {
            if ($("#SettingId").val() == 1) {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        });
    });
</script>

.change 関数は期待どおりに機能しますが、.onload は機能しません。.onload を正しく使用していますか?

4

2 に答える 2

1

ifこの問題は、テスト(ステートメント)がイベントonload()での処理方法とは異なることが原因であると確信していchange()ます。

次onload()のテストを使用します。

if ($("#SelectedGenderId").val() == "3")

文字列リテラルで

しかし、change()あなたが使用しているイベントでは

if ($("#GenderId").val() == 3)

整数リテラルで。

テストしているコントロールはケースごとに異なりますが、実際には 2 つの異なる方法で値を処理するつもりはなかったと思います。

それが役立つことを願っています。

于 2013-08-31T16:24:34.277 に答える
0

私を正しい方向に導いてくれた David Tansey に感謝します。.onload 関数をさらに調べて、selectedGenderId の違いを調整しようとしました。これは、dropdownlistfor html ヘルパーで使用するための文字列である必要がありました。関数の状態を正しく識別するためのこのソリューションを思いつきました (alert() を使用して確認IFステートメントがいつ起動するか。

<script>
    $(function () {
        window.onload = function () {
            if (('@Model.Client.GenderId') == 3) {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
            }
            if (('@Model.Client.SettingId') == 1) {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        }

        $("#GenderId").change(function () {
            if ($("#GenderId").val() == 3) {
                $(".gender-description").show();
            } else {
                $(".gender-description").hide();
           }
        });

        $("#SettingId").change(function () {
            if ($("#SettingId").val() == 1) {
                $(".setting-description").show();
            } else {
                $(".setting-description").hide();
            }
        });
    });

</script>

そして、ここに似たようなものを実装しようとしている人のための情報は次のとおりです。

    <div class="editor-label">
        @Html.LabelFor(model => model.Client.GenderId, "Gender")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.SelectedGenderId, Model.Genders, new { id = "GenderId" })
        @Html.ValidationMessageFor(model => model.Client.GenderId)
    </div>

    <div class="gender-description">
        <div class="editor-label">
            @Html.LabelFor(model => model.Client.GenderDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Client.GenderDescription)
            @Html.ValidationMessageFor(model => model.Client.GenderDescription)
        </div>
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Client.SettingId, "Settings")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.SelectedSettingId, Model.Settings, new { id = "SettingId" })
        @Html.ValidationMessageFor(model => model.Client.SettingId)
    </div>

    <div class="setting-description">
        <div class="editor-label">
            @Html.LabelFor(model => model.Client.SettingDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Client.SettingDescription)
            @Html.ValidationMessageFor(model => model.Client.SettingDescription)
        </div>
    </div>
于 2013-08-31T21:31:36.697 に答える