javascript - 如何在JavaScript中重构开关以获得更简洁的代码？

我正在尝试编写一些更简洁的Javascript / jQuery代码。我如何将这个功能重构为更干净，更小的东西。绝对有一种更好的方法。它可以工作，但是我敢肯定有一种更好的方法来编写这样的函数。提前致谢！

function filterForm(purpose, entry) {
    switch (purpose) {
        case 'Business' :
            switch (entry) {
                case 'Single':
                    $("#moreq1").css( "display", "block" );
                    $("#moreq2").css( "display", "none"  );
                    $("#moreq3").css( "display", "none"  );

                    break;
                case 'Double':
                    $("#moreq1").css( "display", "block" );
                    $("#moreq2").css( "display", "none"  );
                    $("#moreq3").css( "display", "none"  );

                    break;
                case 'Multiple' :
                    $("#moreq1").css( "display", "block" );
                    $("#moreq2").css( "display", "block" );
                    $("#moreq3").css( "display", "none"  );

                    break;
                }

                break;
            case 'Private' :
                switch (entry) {
                    case 'Single'   :
                        $("#moreq1").css( "display", "block" );
                        $("#moreq2").css( "display", "none"  );
                        $("#moreq3").css( "display", "none"  );

                        break;
                    case 'Double'   :
                        $("#moreq1").css( "display", "none"  );
                        $("#moreq2").css( "display", "none"  );
                        $("#moreq3").css( "display", "none"  );

                        break;
                    case 'Multiple' :
                        $("#moreq1").css( "display", "none"  );
                        $("#moreq2").css( "display", "none"  );
                       $("#moreq3").css( "display", "none"  );

                        break;
                }

                break;
            case 'Tourist' :
                switch (entry) {
                    case 'Single'   :
                        $("#moreq1").css( "display", "block" );
                        $("#moreq2").css( "display", "none"  );
                        $("#moreq3").css( "display", "block"  );

                        break;
                    case 'Double'   :
                        $("#moreq1").css( "display", "none" );
                        $("#moreq2").css( "display", "none"  );
                        $("#moreq3").css( "display", "none"  );

                        break;
                    case 'Multiple' :
                        $("#moreq1").css( "display", "none"  );
                        $("#moreq2").css( "display", "none" );
                        $("#moreq3").css( "display", "none" );

                        break;
                }

                break;
            }
    }
}

最佳答案

尽管其他答案在组合各种可能性方面做得很不错，但对我来说，使用所有可能性的“图”似乎更合乎逻辑，并引用以下内容：

var filterForm = (function () {
    var moreq = [
        "",        // So you can use indexes starting at 1
        "moreq1",
        "moreq2",
        "moreq3"
    ], Purposes = {
        "Business": {
            "Single": [moreq[1]],
            "Double": [moreq[1]],
            "Multiple": [moreq[1], moreq[2]]
        },
        "Private": {
            "Single": [moreq[1]],
            "Double": [],
            "Multiple": []
        },
        "Tourist": {
            "Single": [moreq[1], moreq[],
            "Double": [],
            "Multiple": []
        }
    };

    return function (purpose, entry) {
        var i, j, cur, display;

        for (i = 1, j = moreq.length; i < j; i++) {
            cur = moreq[i];
            display = Purposes[purpose][entry].indexOf(cur) > -1 ? "block" : "none";
            console.log("Setting " + cur + " as " + display);
            //$("#" + cur).css("display", display);
        }
    };
}());

filterForm("Business", "Multiple");

演示：http://jsfiddle.net/w3Jnn/1/

对象中的数组是将显示设置为block的元素。要更改特定设置，只需修改Purposes对象的数组。

当然，我的函数不会对Purposes[purpose][entry].indexOf(cur) > -1部分做太多检查-假定purpose和entry参数将具有有效值。可以对其进行修改以进行检查，但目前看来并不重要。

值得注意的是，这使用闭包（周围的(function () { })）一次实例化Purposes和items变量，但将它们置于全局范围之外。

另请注意，并非所有浏览器（主要是旧版IE）都支持Array.indexOf方法，因此，在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Compatibility页面上会包含一个垫片，以确保其正常运行，以及其他可以在Google上找到的垫片。