如何使用js / css创建一个弹性项目以不显示任何内容

Question

我一直在尝试制作一个覆盖整个容器部分的输入块。 还要在输入后定义另一个覆盖容器整个部分的块。 所以，我需要的功能是，如果容器有两个弯曲的项目，一个可以隐藏在同一时间，和其他将是displayed.Initially 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/

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