javascript - 如何使用 js/css 使 flex 元素不显示

Question

我一直在尝试制作一个覆盖其容器的整个部分的输入 block 。还定义另一个 block ，当输入完成时，该 block 覆盖容器的整个部分。所以我需要这样的功能，如果一个容器有两个 flex 元素，一次可以隐藏一个，另一个将显示。最初 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/

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