Question

我一直试图制作一个覆盖整个容器的输入块。还可以在输入时定义覆盖容器整个部分的另一个块。所以我需要这样的功能：如果一个容器有两个弹性项目，一次可以隐藏一个，其他的将显示。最初显示id=show-first id="show-after"的样式是{{1} }}

以下是代码： -

display:none;

Javascript代码是： -

<div id="container">
    <div class="flex-item" id="show-first">Enter the name
        <input type="text" id="name"></input>
        <input type="submit" name="Play" onclick="swapElement()"></input>
    </div>
    <div class="flex-item" id="show-after">After input taken show these to full container
    </div>
</div>

我的代码不起作用，只显示第一个元素，即使在输入显示属性的脚本不起作用之后也是如此。我对使用javascript的方法感兴趣，并且不了解jQuery。

Answer 1

使用此JQuery代码：

$(function() {
  document.getElementById('show-after').style.display = 'none';

});
$('input[name=Play]').click(function(){
    var name = $('input[name=name]').val();
    document.getElementById('show-first').style.display = 'none';
    document.getElementById('show-after').style.display = 'block';
});

如果使用CSS设置display：none，则第一个方法无关紧要。

在这里试试：http://jsfiddle.net/rfn4rzeL/

如果您需要更多信息，请发表评论。

如何使用js / css使flex项无显示

1 个答案: