在隱藏塊中苦苦掙扎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文本字段

回答

相關問題