如何在 keyup 上显示表单字段

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 中的字段。使用一些 data-*-attributes（参见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>