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

Question

我最初通过在编写此代码时尝试使用JS最佳实践来开始我的任务，但是我很挣扎，所以我只是把它写成一大堆草率，以使其正常工作，然后尝试在出现故障后对其进行清理。 （您可能会认为这不是一个好主意，但这是我所能做的最好的事情。）

我的老板建议我尝试使用自定义触发器和事件，但这实际上并不是最佳途径。 我还阅读了Rebecca Murphy在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

有一些明显的事情：

1. 不要重复评估$(this) -进行一次，并缓存结果
2. 同样对于selected.index()
3. 对.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(){

顺便说一句，您的代码从根本上没有什么错误，并且坦白地说，对于这么小的一块，我认为您可能考虑得太多了。 如果您对每个元素都使用“主干”视图，那么您可能希望切换到事件驱动的方法，但是对于像您所拥有的那样小的/简单的东西来说，这是过大的选择。

Answer 4

几点：

• 默认情况下，应选择no-information选项，而不是一个空选项。 您也没有选择该处理程序的处理程序-我建议将其删除。
• 您应该在适当的地方使用id代替类（在这里： living ， deseased ， cancer-info和other-illnesses div， deceased-select等。
• 您实际上不应该依赖dom中所选选项的索引-它们可能会更改。 而是使用选定的值确定操作： $(".deceased-select").val()
• .next()控件组的选择看起来不可靠。 最好明确选择所需的内容。
• 无需在任何地方使用委托事件。 更换live有on ，对delegate用一个简单的-thing $('.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();
    }
}