Question

我最初是在编写这段代码时尝试使用JS最佳实践开始我的任务，但是我很挣扎，所以我只是把它写成一个大麻烦的混乱才能让它工作，然后试图在它之后清理它事实。（你可能会认为那不是一个好主意，但这是我能在最好的地方做的。）

我的老板建议我尝试使用自定义触发器和事件，但这似乎并不是最好的路线。我也读过this article by Rebecca Murphy on OOJS似乎可能有答案，但我无法到达那里。

请记住，虽然我肯定是专门寻找一种更优雅（并且更少嵌套，如果依赖于语句）的方式来写这个并且肯定感谢任何帮助，我也在寻找模式这可以帮助我解决我在这里更大的风格缺点，成为一个更好的程序员。例如，我知道这是遍历DOM的最笨拙和最慢的方式。

一个重要的注意事项：在这种情况下，我无法控制大部分标记（除了将类添加为JS / CSS钩子），因为它是由SimpleForm Ruby gem生成的（我无法链接到它，因为我的低分）。 CSS无关紧要。所以它真的只是JS。

上下文

根据选择或单选按钮选项显示/隐藏某些内容。

编辑：对不起，我的HTML在这里变得很奇怪，所以我刚做了jsFiddle。

编辑2：我们正在使用jQuery 1.6.4，所以如果您想知道为什么我使用.delegate代替.on，那就是原因。

Answer 1

您还可以通过删除重复的代码来显示/隐藏项目来保持干燥状态。这是一种非常简单的改进方法：

function changeElements (show_elements, hide_elements) {
    if (show_elements === null) {
        // code to hide all
    }

    container.siblings(show_elements).slideDown();
    container.siblings(hide_elements).slideUp();
}

然后使用该函数，只需给它选择器显示，并分别隐藏：

changeElements('.deceased', '.living, .other-illnesses, .cancer-info');

Answer 2

有一些显而易见的事情：

不要反复评估$(this) - 执行一次，并缓存结果
同样适用于selected.index()
使用.slideUp和.slideDown('fast')的简单包装，这样您就不会反复重复这些包装，并且可以根据需要在一个地方更改动画。

最终的块可以写成：

var $next = $(this).closest('.control-group').next();
if ($(this).val() === 'true') {
    $next.slideUp();
} else {
    $next.slideDown();
}

事实上，整个if块可以这样写，虽然有些人可能会发现这个太简洁：

$next[$(this).val() === 'true') ? 'slideDown' : 'slideUp']();

Answer 3

两件小事（除了提到的两个Alnitak）：

1）不要使用直播（请参阅http://bitovi.com/blog/2011/04/why-you-should-never-use-jquery-live.html或该主题的任何SO帖子）

2）$(document).ready(function(){可以是$(function(){

除此之外，你的代码没有任何根本性的错误，老实说，对于这么小的一块，我认为你可能过度思考。如果您对每个元素使用“Backbone”视图，那么您可能希望切换到事件驱动的方法，但这对于像您所拥有的那样小/简单的东西来说是过度的。

Answer 4

几点：

默认情况下应选择无信息选项，而不是空信息选项。你也没有选择那个的处理程序 - 我建议删除它。
您应该使用ID而不是适当的类（在此处：living，deseased，cancer-info和other-illnesses div，deceased-select等。
你真的不应该依赖于dom中所选选项的索引 - 它们可能会改变。而是使用选定的值来确定操作：$(".deceased-select").val()
.next()控制组的选择看起来不可靠。最好明确选择你想要的东西。
无需在任何地方使用委派活动。将live替换为on，delegate - 用简单的$('.had-cancer-radio').on(…
你可以减少if-else语句：

var value = $(".deceased-select").val(),
    other = $("#other-illnesses, #cancer-info"),
    deceased = container.siblings('.deceased'),
    living = container.siblings('.living');
if (value == "no-information") {
    other.hide();
} else {
    other.slideDown('fast');
    if (value == "living") {
        living.slideDown('fast');
        deceased.hide();
    } else /* if (value == "deceased") */ {
        deceased.slideDown('fast');
        living.hide();
    }
}

这里有一个更优雅/干/可维护的JS解决方案？

4 个答案: