填写完所有输入后如何显示div [英] How to show a div after all inputs filled out

问题描述

当用户填写所有字段时，div应该显示.如何引用这三个输入选项，以便div仅在所有三个都有值时才显示?

When a user fills out all fields, the div should show. How do I reference the three input options so the div will show only when all three have a value?

HTML:

Type here:<input type="text" id="gname">
Type here:<input type="text" id="gname2">
Select:<select id="gname3">
  <option value="" style="display:none;"></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

<div id="number">
  Test 
</div>

jQuery:

<script>
$('#gname').bind('keyup change',function(){
    if(this.value.length > 0){
      $('#number').show();
}
else {
    $('#number').hide();
}
});
</script>

CSS:

<style>
  #number { display: none; height: 100px; border: solid 1px #ddd; }
</style>

推荐答案

基于您的示例

$('input[type="text"], select').bind('keyup change',function(){

    // get elements that are empty.
    var empty = $('input[type="text"], select').map(function(index, el) {
        return !$(el).val().length ? el : null;
    }).get();

    // could also be placed outside of the function
    var number = $('#number');

    // check if there are any empty elements, if there are none, show numbers, else hide number.
    !empty.length ? number.show() : number.hide();
});

这将遍历您的元素(示例中提供)，并检查这些元素是否具有空值.然后它将返回一个空元素数组.

This will loop over your elements (provided in example) and check if those elements have an empty value. it will then return an array of elements that are empty.

然后检查元素数组是否为空，显示数字，否则隐藏数字.

There then is a check if the array of elements is empty, show the number, else, hide the number.

JSFiddle

这篇关于填写完所有输入后如何显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！