這里有更優雅/干/可維護的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();
    }
}