0

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

带有整数文字。

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

希望有帮助。

于 2013-08-31T16:24:34.277 回答
0

感谢 David Tansey 将我推向正确的方向。在进一步查看 .onload 函数并尝试调和 SelectedGenderId 之间的差异之后，SelectedGenderId 需要成为与 dropdownlistfor html helper 一起使用的字符串，我想出了这个解决方案来正确识别函数的状态（使用 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 回答