如何根据其中的空输入字段隐藏div？

Question

我有一个由多个可选子部分组成的表单 - 每个子部分都包含在一个

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

在编辑表单时，我希望隐藏那些尚未完成的子部分，并且显然我希望做到不引人注目。为了简化事情，我只是检查那些名称以“surname”结尾的字段是否为空，然后适当地显示/隐藏。到目前为止，我有以下内容。

//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选择器可能是错误的，或者确实不合适。（当然，我真正想做的是显示任何已完成字段的部分，但我想先检查最重要的字段。）如果有人能指点我正确的方向，我将不胜感激...

- dycey

Answer 1

不喜欢选择器？不确定这是否是您真正在寻找的，但这将隐藏所有具有空输入的详细元素。也许这是一个提示。

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

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

- cristianlibardo

Answer 2

感谢大家，[value=""]是我缺少的部分。如果有人想知道，以下是简单的jQuery代码（感谢cristian）：

    //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');
      }
    });

- dycey

Answer 3

这可能只是一个打字错误，但您在标记中不需要/不应该使用CSS类名“.details”，而只需使用“details”。点前缀是CSS / jQuery选择器语法的一部分。

根据文档，":empty"可以找到空元素（即不包含子元素），而不是没有值的表单元素（空文本框）。检查值属性是否等于空字符串将适用于单行文本输入，但您需要更复杂的查询来包括文本区域，单选按钮等。

- Kevin Gorski

Answer 4

这可能会完成所请求的事情：

$("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... */

- Tomalak