Jquery 隐藏块中的MDL文本字段

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

我试图创建一个HTML表单，让人们列出他们带了多少人，他们的名字和他们的饮酒偏好。我使用谷歌的Material Design Lite让它看起来特别时髦，但我遇到了一个问题，我无法显示文本字段（我使用了一些CSS和jQuery技巧，只显示姓名字段等选定客人的数量，你可以看到我在其他地方找到了StackOverflow…）

这是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);
    }
});

$（“#下拉列表”）.change（函数（）{
//变量x等于所选的数字。
var x=parseInt（$（this.val（））；
//元素等于长方体容器的子元素
var元素=$（“#盒子容器”）.children（）；
//将所有子项设置为“无”。（这将隐藏它们）。
$（element.css（{display:“none”}）；
//循环次数与所选次数相同。（x的值）。
对于（i=0；i

这是没有显示的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>

名称

这里有一个代码笔来显示整个过程和问题：

输出中的第一行只是显示它应该是什么样子，然后如果您选择了一些来宾，您将看到只有单选按钮会显示前2个条目，而不是文本字段。我将3项保留为纯HTML字段，只是为了显示我的目标。 有人知道为什么这不能像我期望的那样工作吗？提前感谢。

将您的风格更改为：

.boxes>div {
    display: none;
}

这限制了它，因此它仅适用于作为具有

class=“box”

的div的直接子级的div。您所拥有的将样式应用于具有

class=“box”

的div的后代的所有div

---

您还可以使用

：lt（）

选择器，而不是循环

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

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

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

---

由于CSS规则，您的文本字段保持隐藏状态

.boxes div {
    display: none;
}

该规则表示，不显示

.box

元素的任何子元素，而不仅仅是直系子元素（换句话说，孙子、曾孙等）。它包括保存文本输入的

元素。（它们属于类

mdl textfield

）

当您的JavaScript执行时，您只会在

#box容器

的直接子容器中淡出。这对文本字段

元素没有影响，因为这些元素是

.box

容器的“孙子辈”

---

这个问题不会影响第三个选项，因为您使用的是标准的

元素，而不是MDL

，而且CSS规则不适用。

非常好，谢谢！我怀疑是那样的傻事。啊，我明白了。谢谢你的解释，这很有道理。