Question

我遇到一个问题，让两组功能正常工作。我有一个更改函数，它显示和隐藏一个按预期工作的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吗？

Answer 1

我很确定问题是由于您的if语句与您在onload()事件中处理它的方式不同change()。 / p>

在onload()中，您使用以下测试：

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

带字符串文字

但在您正在使用的change()事件中

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

带有整数字面值。

我怀疑即使您正在测试的控件在每种情况下都不同，但您并不打算以两种不同的方式处理这些值。

希望有所帮助。

Answer 2

感谢David Tansey推动我走向正确的方向。在进一步查看.onload函数并尝试调整SelectedGenderId之间的区别之后，我想出了一个正确识别函数状态的解决方案（使用alert（）来查看）需要使用的字符串与html帮助器的dropdownlist之间的区别。当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>

mvc 4 jquery函数有dropdownlist和window.onload问题

2 个答案: