我正在尝试编写一些更清晰的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; } } }I am trying to write some cleaner Javascript / jQuery code. How do I refactor this function into something cleaner and smaller. Definitely seems like there is a better way to do this. It works but i'm sure there is a better way of getting writing a function like this. Thanks in advance!
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参数将具有有效值。 这可以修改以检查，但它现在似乎并不重要。
作为一个注释，它使用一个闭包（around (function () { }) ）来实例化Purposes和items变量一次，但是将它们排除在全局范围之外。
另请注意，所有浏览器（主要是旧IE）都不支持Array.indexOf方法，所以在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/上有一个垫片。 Array / indexOf＃要包含在您的页面上以确保其有效的兼容性 ，以及您可以在Google上找到的其他功能。
While the other answers have done a decent job of combining the possibilities, it seems more logical to me to use a "map" of all the possibilities, and reference that:
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");DEMO: http://jsfiddle.net/w3Jnn/1/
The arrays in the object are which elements to set the display as block. As soon as you want to change a specific setting, just modify the Purposes object's arrays.
And of course, my function doesn't do much checking the Purposes[purpose][entry].indexOf(cur) > -1 part - it assumes the purpose and entry parameters will have valid values. This could be modified to check, but it didn't seem important right now.
As a note, this uses a closure (the surrounding (function () { })) to instantiate the Purposes and items variables once, yet keep them out of the global scope.
Also note, the Array.indexOf method isn't supported in all browsers (mainly old IE), so there's a shim at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Compatibility to include on your page to make sure it works, among other ones you can find with Google.
更多推荐
发布评论