0

我正在尝试构建一种基于复选框来管理隐藏和显示某些字段的通用方法。在我的项目中，通常某些表单可能包含一个检查字段，如果选中该复选框，它将与其他字段相关联，并且它们将根据复选框显示或隐藏。

我是 javascripting 的新手，希望有人能帮助我在这里保持正确的道路。在我的 django 表单中，我使用 data 属性来指示复选框和 data 字段的标志，以指示将影响哪些字段，如下所示：

class PackageForm(forms.ModelForm):
    '''
    PackageForm
    '''
    class Meta:
        model = Package
        widgets = {
            'recurring_flag'      : CheckboxInput(attrs={'data-collapse-flag' : 'True'}),
            'recurring_type'      : Select(attrs={'data-collapse-id' : 'recurring_flag'}),
            'recurring_period'    : TextInput(attrs={'data-collapse-id' : 'recurring_flag'}),

        }

当然，根据我在 jquery 中的有限知识，我能够静态编写它，如下所示

$(document).ready(function() {


    $('input[data-collapse-flag]').click(function() {
       if ($(this).is(':checked')) {
           $("label[for='id_recurring_type']").show();
           $('#id_recurring_type').show();
           $("label[for='id_recurring_period']").show();
           $('#id_recurring_period').show();
       }else{
           $('#id_recurring_type').hide();
           $("label[for='id_recurring_type']").hide();
           $('#id_recurring_period').hide();
           $("label[for='id_recurring_period']").hide();
       }
    });

});

但是，我真的想创建一个单独的 javascript 文件来读取 data-collapse-flag 并构建一个操作来循环使用 data-collapge-id 的任何字段来应用该操作。因此，只要需要这种情况，我就可以在我的所有表单中通用地使用该脚本。

如果有人可以建议我如何构建这样的东西或向我指出该方法，非常感谢。

问候，

4

1 回答 1

1

就像一些概念支持一样：您想要的是循环遍历给定元素的后代并基于开关添加行为，对吗？

你想尝试类似的东西：

  • 在适当的位置添加类名：“collapse-stack”、“collapse-label”、“collapse-list”（标签和列表甚至可能只是“可折叠”）。
  • 让 jQuery 循环遍历这些通用项。

像：

  $(document).ready(function() {
       $('.collapse-stack').each(function(){
            //this = current collapse stack
            $(this).click(function() {
                if ( $(this).is(':checked') ) {
                    $(".collapse-label, .collapse-list").each(function(){
                        //this = current collapse-label
                        $(this).show();
                    });
                }else{
                    $(".collapse-label, .collapse-list").each(function(){
                        //this = current collapse-label
                        $(this).hide();
                    });
                }
            });
        })
    });

或类似的。玩弄那个“每个”功能。

于 2012-07-31T22:52:02.193 回答