1

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

我正在尝试创建一个 HTML 表单，要求人们列出他们带来的人数、姓名和饮酒偏好。我正在使用 Google 的 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);
    }
});

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

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

4

2 回答 2

1

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

.boxes div {
    display: none;
}

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

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

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

于 2015-09-07T22:39:27.950 回答
0

将您的样式更改为：

.boxes>div {
    display: none;
}

这限制了它，因此它仅适用于作为 div 的直接子级的 div class="boxes"。您所拥有的将样式应用于作为 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

于 2015-09-07T22:39:19.947 回答