在隐藏块中苦苦挣扎MDL文本字段

我应该先说这个，我说我不擅长HTML，jQuery或CSS。我通过谷歌搜索接近我之后的东西来完成大部分工作，试图理解它是如何工作的，然后将其调整到我想要的状态。在隐藏块中苦苦挣扎MDL文本字段

我试图创建一个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>

下面是一个codepen以显示整个事情和问题：http://codepen.io/anon/pen/meJWem

输出中的第一行只是显示应该看起来像什么，然后如果您选择了多个guest，您将看到只有单选按钮将显示前2个条目，而不是文本域。我将3条目作为纯HTML字段留下，以显示我所追求的内容。有没有人有任何想法，为什么这不工作，因为我期待它？提前致谢。

来源

2015-09-07 Wandel

你改变风格：

.boxes>div { 
    display: none; 
}

这限制了它，所以它仅适用于那些与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

来源

2015-09-07 22:39:19

这很好，谢谢！我怀疑这是一件愚蠢的事情。 – Wandel

文本字段保持隐藏，因为CSS规则的

.boxes div { 
    display: none; 
}

这条规则说的.boxes元素，而不仅仅是眼前的孩子的任何儿（换句话说，孙子女，孙辈等）不会显示。这包括保存文本输入的<div>元素。（他们是mdl-textfield）

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

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

来源

2015-09-07 22:39:27

啊，我明白了。感谢您的解释，这是有道理的。 – Wandel

在隐藏块中苦苦挣扎MDL文本字段

回答

相关问题