与隐藏块中的 MDL 文本字段作斗争

Question

我应该先说我不擅长 HTML、jQuery 或 CSS。我通过谷歌搜索近似于我所追求的东西来完成大部分事情，试图了解它是如何工作的，然后根据我的需要调整它。

我正在尝试创建一个 HTML 表格，要求人们列出他们带来的人数、姓名和饮酒偏好。我正在使用 Google 的 Material Design Lite 使它看起来格外时髦，但我运行遇到了一个无法显示文本字段的问题（我我正在使用一些 CSS 和 jQuery 技巧来仅显示名称字段等 selected 客人的数量，你可以看到我在 Whosebug 的其他地方找到了...）

这是jQuery:

$("#dropDown").change(function(){
  //Var x is equal to the number selected.
  var x = parseInt($(this).val());
  //Element is equal to the children of box-container
  var element = $("#box-container").children();
  //Set all children to display as none. (This hides them).
  $(element).css({display:"none"});
  //Loop for as many times as selected. (The value of x).
  for(i = 0; i < x; i++){
    //Show each child by displaying as block.
    $(element[i]).fadeIn(700);
    }
});

这是未显示的 MDL 元素：

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" name="Demo" id="demo" />
  <label class="mdl-textfield__label" for="demo">Name...</label>
</div>

这里有一个 codepen 来展示整个事情，以及问题：http://codepen.io/anon/pen/meJWem

输出中的第一行只是为了显示它应该是什么样子，然后如果你 select 一些客人，你会看到只有单选按钮会显示前 2 个条目而不是文本字段。我将第 3 个条目保留为普通的 HTML 字段，只是为了显示我想要的内容。有谁知道为什么这不能像我期望的那样工作？提前致谢。

Answer 1

将您的风格更改为：

.boxes>div {
    display: none;
}

这对其进行了限制，因此它仅适用于 div 和 class="boxes" 的直接子代 div。您所拥有的样式将样式应用于所有 div 的 div 和 class="boxes".

的后代

jsfiddle

您也可以使用 :lt() 选择器，而不是循环。

$("#dropDown").change(function(){
    var x = parseInt($(this).val());

    var $elements = $("#box-container").children();

    $elements.hide().filter(':lt(' + x + ')').fadeIn(700);
});

jsfiddle

Answer 2

由于 CSS 规则

，您的文本字段保持隐藏状态

.boxes div {
    display: none;
}

该规则表示任何个 .boxes 元素的子元素，而不仅仅是直系子元素（换句话说，孙子、曾孙等）不会显示.这包括保存文本输入的 <div> 元素。（他们来自 class mdl-textfield）

当您的 JavaScript 执行时，您只会淡出 #box-container 的直接子项。这对文本字段 <div> 元素没有影响，因为这些元素是 .boxes 容器的 "grandchildren"。

这个问题不会影响第三个选项，因为您使用的是标准 <input> 元素而不是 MDL <div>，并且 CSS 规则不适用。

与隐藏块中的 MDL 文本字段作斗争

Struggling with MDL textfields within hidden blocks

html

forms

jquery

material-design-lite