Question

在我开始之前，我是jquery的新手，但我喜欢我所学到的一切。

我有一个大型表单，其中有几个隐藏的div，只有在特定输入具有值或选中特定复选框时才会显示。每个div都有一个名为“start-hidden”的类，它最初会使所有div在页面加载时隐藏。

复选框和输入框的所有值都存储在数据库中，我想这样做，如果有人回到表单更新某些内容，它会正确“显示”应该可见的div（有价值或具体检查的人）。

不是为我需要检查的每个字段编写特定的“if语句”，而是可以检查div中具有“start-hidden”类的所有输入，如果输入不是空的，它会使特定的div可见吗？

做了一些研究，我尝试了下面的代码，但我感觉我完全偏离了轨道。

    var inp = $(".start-hidden input").val();
    if(jQuery.trim(inp).length > 0){$(this).show();}

另外，有时一个“start-hidden”div可能会有另一个“start-hidden”div，我想这将是一个嵌套的隐藏div，但我需要确保它只打开父div。

希望这对某人有意义！

提前致谢！

Answer 1

试试这个：

$(".start-hidden").each(function(){
    if( $.trim($(this).find(":text").val()).length > 0 || $(this).find(":checked").length > 0){
        $(this).show();
    }
});

Answer 2

也许我过度思考这个问题，因为Cybermate的答案是如此简短和甜蜜，但我理解这个问题的方式我认为还需要更多答案......

首先，您需要查看要用于INPUTS的选择器，而不一定是DIVS。我通过在所有输入/复选框中使用一个公共类来实现这一点，我想用它做什么。

$(".toggler").each(....);

接下来，您需要有一种方法将INPUTS链接到DIVS。我通常使用类似的ID属性来执行此操作。

<input id="name" type="text" class="formInput toggler" />
<div id="name1">Instructions for Name here</div>

然后，您需要找到一种方法来绑定一个事件，以便您可以在事件发生时切换DIV。在这种情况下，您既有输入又有复选框。这两个是不同的，而不是检查.val（）复选框，你可能要检查复选框是否被选中。当您确定已设置值或选中复选框时，您将需要显示div。

$(".toggler").each(function() {
    var me = $(this);
    var myId = me.attr("id");
    var myDivId = "#"+myId+"1";

    if(me.is(":checkbox")) {
        //check the initial state of the checkbox
        if(me.is(":checked")) $(myDivId).show();

        // show/hide the div on clicking
        $("#"+myId).live('click', function() {
            $(myDivId).toggle();
        });
    } else {
        // check the initial state of the input
        if($.trim(me.val().length) > 0) {
            $(myDivId).toggle();
        }

        // if the state changes show the div
        $("#"+myId).live('change', function() {
            if($.trim($(this).val().length) > 0) {
                $(myDivId).show();
            } else {
                $(myDivId).hide();
            }
        });
    }
});

这是一个有效的jsfiddle

类可见或不可见的Jquery输入字段

2 个答案: