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或其他内容。因此，我没有看到使用类hide()在您的元素上调用initially_hidden的感觉。

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

这样，所有元素都在应该显示的表单上，并且所有不应该显示的元素都被隐藏。如果你有一个复选框检查可以使其他元素可见，我建议你做两件事之一。

相对于您的复选框遍历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"); 
        }
});

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

在jquery中设置初始状态？

2 个答案: