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 ルールが適用されないため、この問題は 3 番目のオプションには影響しません。

于 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 に答える