0

我最初是通过在编写这段代码时尝试使用 JS 最佳实践来开始我的任务的，但我很挣扎，所以我只是把它写成一个大杂烩来让它工作，然后试图在事后清理它。（你可能会争辩说这不是一个好主意，但这是我现在能做的最好的事情。）

我的老板建议我尝试使用自定义触发器和事件，但这似乎并不是最好的方法。我还阅读了 Rebecca Murphy 关于 OOJS 的这篇文章，似乎它可能有答案，但我就是无法到达那里。

请记住，虽然我绝对是专门寻找一种更优雅（并且更少依赖于嵌套的 if 语句）的方式来编写这个并且绝对感谢任何关于这件事的帮助，但我也在寻找可以提供帮助的模式我在这里解决了我更大的文体缺陷并成为一个更好的程序员。例如，我知道这是遍历 DOM 的最笨拙和最慢的方法。

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

语境

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

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

编辑 2：我们使用的是 jQuery 1.6.4，所以如果你想知道我为什么使用.delegate而不是.on，那就是原因。

4

4 回答 4

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');
于 2012-08-24T17:22:14.537 回答
0
于 2012-08-24T17:29:02.410 回答
0

有几点很明显：

  1. 不要$(this)重复评估 - 只做一次，然后缓存结果
  2. 同样对于selected.index()
  3. 对 and使用简单的包装器.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']();
于 2012-08-24T17:14:11.143 回答
0

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

1）不要使用现场（见http://bitovi.com/blog/2011/04/why-you-should-never-use-jquery-live.html，或任何关于该主题的SO帖子）

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

除此之外，您的代码基本上没有任何问题，老实说，对于这么小的一部分，我认为您可能想多了。如果您对这些元素中的每一个都使用说 Backbone 视图，那么您可能想要切换到事件驱动的方法，但这对于像您所拥有的那样小/简单的东西来说太过分了。

于 2012-08-24T17:15:20.953 回答