ASP.NET 5 MVC 用jQuery实现表单div动态显隐时的交互异常排查

• 致命逻辑错误：第一个分支的判断语句写为 if (value = "Book")，此处是单等号赋值操作而非相等比较，执行时会直接把字符串"Book"赋值给value变量，非空字符串的布尔判定为真，导致无论用户选择哪个下拉选项，代码都会直接进入Book的展示分支，后续针对AudioBook、ReferenceBook、DVD的所有判断分支永远不会触发，也就出现了切换选项无响应的问题。
• 状态管理缺陷：每个分支仅零散配置需要展示元素的show()、需要隐藏元素的hide()，没有做全量状态重置，切换选项时上一个分支遗留的展示元素没有被统一隐藏，就会出现仅展示部分目标表单元素的异常。

function hideOnLoad() {
    // 所有可动态切换的表单区块统一执行隐藏
    $("#ThePages").hide();
    $("#TheRunTime").hide();
    $("#Borrowable").hide();
    $("#BorrowedBy").hide();
    $("#TheDate").hide();
}

$(document).ready(function () {
    // 页面初始加载时执行全量隐藏逻辑
    hideOnLoad();
    // 绑定下拉框的选项切换事件
    $("#Types select").change(function () {
        // 每次切换选项先重置所有区块的隐藏状态，杜绝元素残留
        hideOnLoad();
        var value = $(this).val();
        // 修正单等号为三等号严格相等判断
        if (value === "Book") {
            $("#ThePages").show();
            $("#TheRunTime").show();
            $("#Borrowable").show();
            $("#BorrowedBy").show();
            $("#TheDate").show();
        }
        else if (value === "AudioBook") {
            $("#BorrowedBy").show();
            $("#TheDate").show();
        }
        else if (value === "ReferenceBook") {
            $("#ThePages").show();
        }
        else if (value === "DVD") {
            $("#TheRunTime").show();
            $("#Borrowable").show();
            $("#BorrowedBy").show();
            $("#TheDate").show();
        }
    });
});

内容的提问来源于stack exchange，提问作者Joro