如何使用 js/css 使弹性项目不显示

Question

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

这里是代码：-

<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 代码是：-

function swapElement(){
    var name = document.getElementById('name').value;
    document.getElementById('show-first').style.display = 'none';
    document.getElementById('show-after').style.display = 'block'; 
    //not understand what to define for flex item in display property
}

我的代码不工作，只显示第一个元素，即使在输入后显示属性的脚本也不工作。我对使用 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/

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