Как мне скрыть div на основе пустых полей ввода внутри него?

Question

У меня есть форма, состоящая из нескольких дополнительных частей - каждая из которых заключена в

<div class="details"></div>

При редактировании формы я хотел бы скрыть те части, которые еще не заполнены, и, очевидно, я хотел бы сделать это ненавязчиво. Чтобы упростить вещи, я просто проверяю, являются ли те поля, имя которых заканчивается на «фамилия», пустыми, а затем соответственно отображает / скрывает Пока у меня есть это.

//hide the all of the element class details
$(".details").each(function (i) {
  if ($('input[name$=surname]:empty',this).length == 1) { 
    $(this).hide();
  } else {
    $(this).show();
  }
});

Конечно, селектор: empty может быть неправильным или неуместным. (Конечно, я действительно хочу показать все части, где заполнены любые поля, но я подумал, что начну с проверки самого важного.)

Я был бы рад, если бы кто-нибудь мог направить меня в правильном направлении ...

Answer 1

Нет селектора любви? Не совсем уверен, что это то, что вы действительно ищете, но это скрывает все элементы детали с пустым вводом внутри. Возможно, это ключ.

<div class="details">
    <input type="text" name="surname" />
</div>

<script type="text/javascript">
    $(".details input[@value='']").parents(".details").hide();
</script>

Answer 2

Спасибо, ребята, мне не хватало [value = ""]. В случае, если кто-то еще задается вопросом, jQuery, который сделал свое дело (благодаря Кристиану), был

    //hide the all of the element class details
    $(".details").each(function (i) {
      if ($('input[name$=surname][value=""]',this).length == 1) { 
        $(this).hide();
        console.log('hiding');
      } else {
        $(this).show();
        console.log('showing');
      }
    });

Answer 3

Это, вероятно, сделает запрошенную вещь:

$("div.details input").each(function () {
  if (this.value == "")
    $(this).parents("div.details").eq(1).hide();
  else
    $(this).parents("div.details").eq(1).show();
});

Чтобы повлиять только на поля с «фамилией» в атрибуте имени, сделайте очевидное:

$("div.details input[name$=surname]").each(function () { /* etc... */

Answer 4

Возможно, это была просто опечатка, но вам также не нужно / не нужно иметь имя CSS-класса ".details" в вашей разметке, просто "детали". Точечный префикс является частью синтаксиса селектора CSS / jQuery.

Согласно документации , ": empty" находит пустые элементы (как содержащие дочерние элементы), а не элементы формы без значений (пустое текстовое поле). Проверка на наличие атрибута value, равного пустой строке, будет работать для однострочного ввода текста, но вам потребуется более сложный запрос для включения текстовых областей, переключателей и т. Д.