Отображение div, если все входы заполнены

Question

Я застреваю, пытаясь выяснить, как показать div после проверки, чтобы все входы были заполнены. Мне нужны только входы в пределах раздела #intro-info. Я не уверен, что писать в другом заявлении, чтобы сделать дисплей кнопки #intro-button, если все входы были заполнены.

Here is a fiddle if it helps

$(function() { 
 
    var intro = $('.intro'); 
 

 
    intro.on('keypress', function() { 
 
     if ($(this).val().length > 1) { 
 
      $(this).next('.intro').addClass('block'); 
 
     }   
 
     /* else { 
 
      $('.intro').hide(); 
 
     }*/ 
 
    }); 
 
    var allEmpty = true; 
 

 
    $('#intro-info :input').each(function() { 
 
     if ($(this).val() !== '') { 
 
      allEmpty = false; 
 
      return false; // we've found a non-empty one, so stop iterating 
 
     } else 
 
    }); 
 
    return allEmpty; 
 
});

.intro { 
 
    opacity: 0; 
 
    padding: 10px 15px; 
 
    margin: 20px auto; 
 
} 
 

 
.intro:first-child { 
 
    display: block; 
 
    opacity: 1; 
 
} 
 
.block { 
 
    display: block; 
 
    opacity: 1; 
 
    -webkit-animation: fadein 1s ease-in; 
 
    -moz-animation: fadein 1s ease-in; 
 
    animation: fadein 1s ease-in; 
 
} 
 
.next { 
 
    display: none; 
 
} 
 
#intro-button { 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="intro-info"> 
 
    <input id="name" type="text" class="intro"> 
 
    <input id="email" type="email" class="intro"> 
 
    <input id="title" type="text" class="intro"> 
 
    <button id="intro-button">Proceed</button> 
 
</div> 
 

 

 

 
<a class="next">show div</a>

Answer 1

Вы можете использовать JQuery-х toggle() метод для определения видимости элемента. Таким образом, вы можете захватить входные данные из текстовых полей, проверить их длину и передать результат этой функции.

Например:

$('.next').toggle($('#name').val().length > 0); 

установит видимость next DIV в зависимости от того, или не то, что было введено в name поле.

Answer 2

• Используйте input событие вместо keypress
• Использование jQuery.filter и проверить все значения в form кроме button

Также обратите внимание, что селектор для next кнопки должен быть .next, не #next

$(function() { 
 
    var intro = $('.intro'); 
 
    var testFunction = function() { 
 
    return $('#intro-info :input:not(button)').filter(function() { 
 
     return this.value == ''; 
 
    }) 
 
    }; 
 
    intro.on('input', function() { 
 
    $('.next').toggle(!testFunction().length); 
 
    }); 
 
});

.intro { 
 
    //opacity: 0; 
 
    padding: 10px 15px; 
 
    margin: 20px auto; 
 
} 
 
.intro:first-child { 
 
    display: block; 
 
    opacity: 1; 
 
} 
 
.block { 
 
    display: block; 
 
    opacity: 1; 
 
    -webkit-animation: fadein 1s ease-in; 
 
    -moz-animation: fadein 1s ease-in; 
 
    animation: fadein 1s ease-in; 
 
} 
 
.next { 
 
    display: none; 
 
} 
 
#intro-button { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="intro-info"> 
 
    <input id="name" type="text" class="intro"> 
 
    <input id="email" type="email" class="intro"> 
 
    <input id="title" type="text" class="intro"> 
 
    <button id="intro-button">Proceed</button> 
 
</div> 
 
<a class="next">show div</a>

Answer 3

• Измените ваш keypress на input.

• CSS селектор идентификатора предшествует класса селектора, то #intro-button{ display:none} предшествует .block{display:block}. Таким образом, даже если добавлен класс block, но отображение по-прежнему отсутствует.

  Самое простое решение добавить !important в .block собственности display:

  .block { 
      display: block !important; 
  } 
  

• JS часть: Добавить класс, когда все занесены.

  if (intro.filter(function(){ 
      return $(this).val().length > 1 
  }).length === intro.length){ 
      $("#intro-button").addClass('block'); 
  }else { 
      $("#intro-button").removeClass('block'); 
  }