2011-08-31 132 views
0

我有一個表單,它有後續問題,只有當他們以某種方式回答某個特定的其他問題時纔會顯示。如果我以空白表格開始,現在設置的方式非常有效。然而,當用戶回來編輯表單及其加載時,無論複選框是否從數據庫中預先檢查(通過php),我的設計都打破了。在jquery中設置初始狀態?

因此,我需要一些建議或建議,以便如何最好地重構我的jQuery代碼,以便在窗體加載時顯示並隱藏正確的元素。

現在,我有許多.change的()爲複選框或引起其它(或多個)元件,以隱藏和/或節目選擇按鈕,諸如以下功能:

$("#elt_prev_divorced").change(function() { 
     if ($(this).is(":checked")) { 
       $("#questions_divorced").show("slow"); 
     } else { 
       $("#questions_divorced").hide("slow"); 
     } 
}); 

$("input").change(function() { 
    var selected_item = $(this).attr('id'); 

switch (selected_item) { 
     case "elt_married": 
      $("#elt_inrel_yes").attr('checked', true); 
      $("#elt_reldes_married").attr('checked', true); 
      $("#li_spouse_or_partner").show("slow"); 
      $("#li_marriages").show("slow"); 
      break; 
     case ... 
} 

而那麼我有一個名爲「beginning_hidden」的CSS類,它爲所有在窗體加載時不應顯示的項目設置,如果窗體爲空白。在我的文檔準備功能中,我用CSS標籤隱藏了所有內容。

(function($) { 
    $(".initially_hidden").hide(); 
})(jQuery); 

後,我隱藏這些內容,不過,我現在需要做的所有這些.change的相當於()函數來處理的形式加載與現有數據。我知道我可以將我的更改函數複製並粘貼到準備做這件事情的文檔中,但除了做到這一點可怕的風格之外,我更願意儘量減少重複的代碼。那麼我怎麼能最好/有效地做到這一點?我對JQuery有點新鮮,所以我不確定要採取什麼方向。謝謝!

回答

1

首先在你的css .initially_hidden可以有display:none在樣式表或頁面樣式中設置。 jQuery將設置display:block或任何內聯樣式。所以我沒有看到您的元素hide()與類initially_hidden的意義。

我會做的是處理這在服務器端,並設置initially_hidden所有元素應該被顯示,讓我的CSS隱藏這些元素。

這樣,所有元素都在應顯示的窗體上,並且不應顯示的所有元素都被隱藏。如果你有一個複選框來檢查哪一個會使其他元素可見,我建議你做1件事中的1件。

  • 遍歷dom相對於您的複選框來確定哪個元素應該顯示,因此不需要硬編碼一個id。 This fiddle有一個這樣的例子。

  • 添加自定義屬性的複選框,其中包含要顯示在div /元素ID:

HTML

<input type="checkbox" eleToShow="marriedQuestion" class="questionCheckbox" /> 
<input type="checkbox" eleToShow="divorcedQuestion" class="questionCheckbox" /> 
<input type="checkbox" eleToShow="poligamyQuestion" class="questionCheckbox" /> 

jQuery的

$(".questionCheckbox").change(function() { 
     if ($(this).is(":checked")) { 
       $("#"+$(this).attr("eleToShow")).show("slow"); 
     } else { 
       $("#"+$(this).attr("eleToShow")).hide("slow"); 
     } 
}); 

希望這有助於並且有意義。

+0

處理隱藏/顯示服務器端的元素以進行初始加載時,需要完全重複在php和javascript中隱藏/顯示問題的邏輯,並且由於我還需要處理點擊事件,所以似乎沒有減少重複代碼的優勢。 此外,某些複選框(或選項按鈕選擇)將導致顯示多個元素,並隱藏其他多個元素。此解決方案是否需要更新元素列表? –

+0

我剛剛爲其他人做了[this](http://jsfiddle.net/kqreJ/13/),但是會有這樣的幫助嗎?第一次點擊一個鏈接添加一個div,第二次點擊它將突出顯示它。我只提供這個基本概念,我意識到你的問題是不同的,但在這種情況下突出顯示的div是動態生成的,所以突出顯示是動態的。 – Ali

+0

如果我正在讀你,你建議生成代碼來動態調用.change函數? –

2

在您的文檔就緒功能中,請致電$("#elt_prev_divorced").change()執行您已註冊的處理程序。

+0

這絕對是可行的。沒有我希望的那麼幹淨,但比從更改函數複製代碼要好得多。你知道是否有辦法一次調用所有變更處理程序?其中大約有20個,我擔心在事故中我會錯過一個。 –