Question

我已经做了几个星期了，我似乎无法掌握这一点。我只是在输入前面的字段时尝试显示隐藏的字段。这是我的示例代码：

HTML

<form>
    <div id="group1">
        <label>Field 1:</label>
        <input type="text" class="field1" />
        <br/>
        <label>Field 2:</label>
        <input type="text" class="field2" />
        <br/>
        <label>Field 3:</label>
        <input type="text" class="field3" />
        <br/>
    </div>
    <div id="group2">
        <label>Field 4:</label>
        <input type="text" class="field4" />
        <br/>
        <label>Field 5:</label>
        <input type="text" class="field5" />
        <br/>
        <label>Field 6:</label>
        <input type="text" class="field6" />
        <br/>
    </div>
    <div id="group3">
        <label>Field 7:</label>
        <input type="text" class="field7" />
        <br/>
        <label>Field 8:</label>
        <input type="text" class="field8" />
        <br/>
        <label>Field 9:</label>
        <input type="text" class="field9" />
        <br/>
        <input type="submit" value="Submit">
    </div>
</form>

CSS

#group2 {
    visibility: hidden;
}
#group3 {
    visibility: hidden;
}

脚本

$(document).ready(function () {
$('#group1').find('input[type="text"]').keyup(function () {
    CheckSubmit();
});
    function CheckSubmit() {
        var x = true;
        $('#group1').find('input[type="text"]').keyup(function () {
            if ($(this).val().length === 0) {
                x = false;
                return;
            }
        });

    if (x) {
        $('#group2').css('visibility', 'visible');
        $('#group3').css('visibility', 'visible');
    } else {
        $('#group2').css('visibility', 'hidden');
        $('#group3').css('visibility', 'hidden');
    }
        CheckSubmit();
});

我不确定我在这里做错了什么。有人可以帮忙吗？

Answer 1

我改变了你的代码。我将相关的选择器存储在变量中，因此每次发生变化时都不需要进行大量的重新查询。

这是更新后的代码：

<强>的JavaScript

var inputs = $('#group1').find('input[type="text"]');
var hidden = $('#group2, #group3');

inputs.keyup(function() {
    var test = true;

    inputs.each(function(key, value) {
        if (!$(this).val().length) {
            test = false;
            return false;
        }
    });

    hidden.css('visibility', ( test ? 'visible' : 'hidden' ) );
});

<强>演示

Try before buy

Answer 2

您可以通过检查当前div中的输入以及它们是否都有值来使其更加动态，然后显示下一个div（如果有的话）。

如果他们清除了值，则隐藏所有后来的div。

$(document).ready(function() {
    // you can restrict this to inputs in a specific div or just any input
    $('#group1 input').on('keyup', function () {
        var parentDiv = $(this).closest('div')
        var hasValues = parentDiv.find('input').filter(function() {
            return this.value == '';
        }).length == 0;

        if(hasValues) {
            //parentDiv.next().css('visibility', 'visible'); // show just the next section
            parentDiv.nextAll().css('visibility', 'visible'); // show all later sections
        } else {
            parentDiv.nextAll().css('visibility', 'hidden');
        }
    });
});

DEMO

Answer 3

我用解决方案快速制作了笔。它可能不是最漂亮但它完成了它。基本上在每个keyup事件中，我检查#group1的子项的值长度，如果它们的长度都大于0，则更改数组中的标志。如果所有3个标志都为真，我会显示#group2。

Here's the pen

$('#group2').hide();
$('#group3').hide();

$('#group1').keyup(function() {

  var flags = {
    0: false,
    1: false,
    2: false
  }

  $('#group1 > input').each(function(i, ele) {
    if(ele.value.length !== 0)
      {
        flags[i] = true;

      }
  });

  if(flags[0] && flags[1] && flags[2])
    {
      $('#group2').show();
    }
});

$('#group2').keyup(function() {

  var flags = {
    0: false,
    1: false,
    2: false
  }

  $('#group2 > input').each(function(i, ele) {
    if(ele.value.length !== 0)
      {
        flags[i] = true;

      }
  });

  if(flags[0] && flags[1] && flags[2])
    {
      $('#group3').show();
    }
});

希望它有所帮助：D

Answer 4

如果我理解你的问题，你想要显示＃group2 / -3中的字段，如果前面字段中的所有字段都有值。使用一些数据 - * - 属性（参见MDN），您可以创建这样的处理程序（如果您愿意：jsFiddle，包含更完整的示例）：

$('[data-nextgroup] [type=text]').on('keyup', function (e){
  var fieldgroup = $(this.getAttribute('data-group'))
     ,fields = fieldgroup.find('[type=text]')
     ,canshow = fields.length === 
                 fields.filter( function (i,el) { return el.value.length; } ).length;
  void( canshow && $(fieldgroup.attr('data-nextgroup')).fadeIn() );
});

[data-hidden] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="group1" data-nextgroup="#group2">
        <label>Field 1:</label>
        <input type="text" class="field1" data-group="#group1"/>
        <br/>
        <label>Field 2:</label>
        <input type="text" class="field2" data-group="#group1"/>
        <br/>
        <label>Field 3:</label>
        <input type="text" class="field3" data-group="#group1"/>
        <br/>
    </div>
    <div id="group2" data-nextgroup="#group3" data-hidden>
        <label>Field 4:</label>
        <input type="text" class="field4" data-group="#group2"/>
        <br/>
        <label>Field 5:</label>
        <input type="text" class="field5" data-group="#group2"/>
        <br/>
        <label>Field 6:</label>
        <input type="text" class="field6" data-group="#group2"/>
        <br/>
    </div>
    <div id="group3" data-groups data-hidden>
        <label>Field 7:</label>
        <input type="text" class="field7" />
        <br/>
        <label>Field 8:</label>
        <input type="text" class="field8" />
        <br/>
        <label>Field 8:</label>
        <input type="text" class="field9" />
        <br/>
        <input type="submit" value="Submit">
    </div>

如何在keyup上显示表单字段

4 个答案: