Question

我应该在前言中说我在HTML，jQuery或CSS方面表现不佳。我通过谷歌搜索一些近似于我之后的东西来完成大部分工作，试图理解它是如何工作的，然后根据我的需要进行调整。

我试图创建一个HTML表单，要求人们列出他们带来了多少人，他们的姓名和饮酒偏好。我使用Google的Material Design Lite让它看起来更加时髦，但是我遇到了一个我无法显示文本字段的问题（我＆＃39; m使用一些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);
    }
});

这是没有出现的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>

这是一个用于显示整个问题的代码，以及问题：http://codepen.io/anon/pen/meJWem

输出中的第一行只是为了显示它应该是什么样子，然后如果您选择了多个来宾，您将看到只有前两个单选按钮才会显示条目而不是文本字段。我将3条作为纯HTML字段留下来，以显示我之后的内容。有没有人知道为什么这不起作用，因为我期待它？提前谢谢。

Answer 1

由于CSS规则

，您的文本字段仍处于隐藏状态

.boxes div {
    display: none;
}

该规则表示 .boxes元素的任何子元素，而不仅仅是直接子元素（换句话说，孙子孙女，曾孙子等）。这包括保存文本输入的<div>元素。（他们是班级mdl-textfield）

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

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

Answer 2

将您的风格更改为：

.boxes>div {
    display: none;
}

这限制了它，因此它仅适用于具有class="boxes"的div的直接子节点的div。您所拥有的内容将样式应用于所有具有class="boxes" div的后代的div。

jsfiddle

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

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

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

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

jsfiddle

在隐藏的块

2 个答案: