在jquery中设置初始状态？

Question

我有一个表格，其中包含后续问题，只有当他们以某种方式回答特定的其他问题时才应显示这些问题。如果我从空白表格开始，我现在设置的方式效果很好。然而，当用户回来编辑表单并加载复选框是否从数据库中预先检查（通过 php）时，我的设计就崩溃了。

因此，我需要一些关于如何最好地重构我的 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 ...
}

然后我有一个名为“initial_hidden”的 CSS 类如果表单为空白，则为表单加载时不应显示的所有项目设置。在我的文档准备功能中，我用 CSS 标签隐藏了所有内容。

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

然而，在隐藏这些元素之后，我现在需要执行所有这些 .change() 函数的等效操作来处理加载现有数据的表单。我知道我可以将更改函数复制并粘贴到准备执行此操作的文档中，但除了我这样做的风格肯定是可怕的之外，我更希望最大限度地减少重复代码。那么我怎样才能最好/最有效地做到这一点呢？我对 JQuery 有点陌生，所以我不确定这里应该采取什么方向。谢谢你！

Answer 1

在文档就绪函数中，调用 $("#elt_prev_divorced").change() 来执行您已注册的处理程序。

Answer 2

首先，在 css .initially_hidden 中，可以在样式表或页内样式中设置 display:none。 jQuery 将设置 display:block 或内联样式中的任何内容。因此，我不认为使用 initially_hidden 类对元素调用 hide() 有何意义。

我要做的就是在服务器端处理这个问题，并在所有不应该显示的元素上设置initially_hidden，并让我的CSS隐藏这些元素。

这样，所有应该显示的元素都在表单上，​​而所有不应该显示的元素都被隐藏了。如果您有一个复选框检查将使其他元素可见，我建议您执行两件事中的一件。

• 遍历与复选框相关的 dom 以确定应显示哪个元素，因此无需硬编码 id。 这个小提琴有一个类似的例子。

• 向您的复选框添加一个自定义属性，其中包含要显示的 div/元素的 id：

< strong>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"); 
        }
});

希望这有帮助并且有意义。