2011-08-31 162 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个,我担心在事故中我会错过一个。 –