CSS和JavaScript單擊按鈕以創建卡片元素

-1

假設我有一個空白頁面和一個按鈕（位於右上角的某處）。當我點擊那個按鈕時，我希望能夠在頁面上創建一個正方形（一張聯繫人卡片）。當我再次點擊它時，我希望能夠在它旁邊創建另一張具有相同尺寸的卡片（例如，每次點擊都會添加一張卡片，直到卡片的底部4開始，直到卡片底部開始整個頁面填充）。CSS和JavaScript單擊按鈕以創建卡片元素

我不確定我是如何做到這一點的。我知道如何插入一個按鈕和一個點擊事件，但不知道如何構造這個。我需要使用flex嗎？

由於提前，

來源

2016-07-12 Jeffery smith

你有迄今我們看到/幫助你編寫任何代碼.. 。？ – Stuart

默認情況下，您可以在頁面上隱藏一個元素，最好是具有所需CSS設置的div。點擊按鈕，您可以使用'code'.clone'code'方法克隆existinig div並將其顯示設爲阻止。這樣你就可以在用戶界面上生成n個框。 –

嗨，斯圖爾特，我還沒有寫任何代碼呢。我試圖想象我如何解決這個問題。 –

我試圖想象我怎麼能解決這個問題。

我需要使用flex嗎？

2016年，flex將是創建水平行的最佳方法，每行包含4個等寬元素，是的。

但是，如果你想有一箇舊的瀏覽器解決方案，你也可以使用

display: inline-block;
float: left;
width --px;

，並明確指定的寬度，這意味着容器每個:nth-of-type(4n+1)元素將從新行開始。

例如：

.card { 
display: inline-block; 
float: left; 
width: 100px; 
margin: 12px; 
}

意味着每卡需要的空間（12px100px + + 12px）124px。

所以，如果你給的4×124 .card-container一個明確的寬度：

.card-container { 
width: 496px; 
}

然後每4張牌後，下一張牌將開始一個新行。

來源

2016-07-12 10:02:47 Rounin

下面是使用jQuery和Twitter Bootstrap的快速原型。

按下按鈕時，將顯示第一張牌爲card-hidden的牌，並且已移除card-hidden類。下一個按鈕將顯示下一張卡，直到沒有卡。

HTML

<html> 
<body> 
    <button id="button">Add</button> 
    <div class="container"> 
    <div class="row"> 
     <div class="card card-hidden col-xs-3">1</div> 
     <div class="card card-hidden col-xs-3">2</div> 
     <div class="card card-hidden col-xs-3">3</div> 
     <div class="card card-hidden col-xs-3">4</div> 
    </div> 
    </div> 
</body> 
</html>

CSS

.card { 
    height: 200px; 
} 
.card-hidden { 
    display: none; 
}

$("#button").on("click", function(e) { 
if ($(".card-hidden").length > 0) { 
    $(".card-hidden").first().slideToggle(function() { 
     $(this).removeClass("card-hidden"); 
    }); 
} else { 
    console.log("No more cards to show."); 
} 
});

來源

2016-07-12 10:04:55

CSS和JavaScript單擊按鈕以創建卡片元素

回答

相關問題