包裝追加方法添加三個項目。如何添加一個項目？

我嘗試動態添加包裝項目通過click方法。所有的每件事情都工作正常，除了一次點擊packery add 三新項目。我的問題是如何在單擊時添加一個項目？包裝追加方法添加三個項目。如何添加一個項目？

感謝。

編輯

頁面加載電網項目後是五。看下面的圖片。

當click的追加項目button packery將增加更多的項目。看下面的圖片。

片段

var $grid = $('.grid').packery({ 
 
    itemSelector: '.grid-item' 
 
}); 
 

 
$('.append-button').on('click', function() { 
 
    // create new item elements 
 
    var $items = getItemElement().add(getItemElement()).add(getItemElement()); 
 
    // append elements to container 
 
    $grid.append($items) 
 
    // add and lay out newly appended elements 
 
    .packery('appended', $items); 
 
}); 
 

 

 
// make <div class="grid-item grid-item--width# grid-item--height#" /> 
 
function getItemElement() { 
 
    var $item = $('<div class="grid-item"></div>'); 
 
    // add width and height class 
 
    var wRand = Math.random(); 
 
    var hRand = Math.random(); 
 
    var widthClass = wRand > 0.85 ? 'grid-item--width3' : wRand > 0.7 ? 'grid-item--width2' : ''; 
 
    var heightClass = hRand > 0.85 ? 'grid-item--height3' : hRand > 0.5 ? 'grid-item--height2' : ''; 
 
    $item.addClass(widthClass).addClass(heightClass); 
 
    return $item; 
 
}

* { box-sizing: border-box; } 
 

 
body { font-family: sans-serif; } 
 

 
/* ---- grid ---- */ 
 

 
.grid { 
 
    background: #DDD; 
 
    max-width: 1200px; 
 
} 
 

 
/* clear fix */ 
 
.grid:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
/* ---- .grid-item ---- */ 
 

 
.grid-item { 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    line-height: 80px; 
 
    float: left; 
 
    width: 80px; 
 
    height: 80px; 
 
    background: #C09; 
 
    border: 2px solid hsla(0, 0%, 0%, 0.5); 
 
} 
 

 
.grid-item--width2 { width: 160px; } 
 
.grid-item--height2 { height: 160px; line-height: 160px; } 
 

 
.grid-item--width3 { width: 240px; } 
 
.grid-item--height3 { height: 240px; } 
 

 
button { font-size: 20px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="http://mfzy.co/packery.pkgd.js"></script> 
 
<h1>Packery - appended</h1> 
 

 
<div class="grid"> 
 
    <div class="grid-item grid-item--width2">1</div> 
 
    <div class="grid-item grid-item--height2">2</div> 
 
    <div class="grid-item">3</div> 
 
    <div class="grid-item">4</div> 
 
    <div class="grid-item grid-item--height2">5</div> 
 
</div> 
 

 
<p><button class="append-button">Append items</button></p>

我的問題：

如何控制追加項目？我想動態添加一個項目不是三個項目單click。

注：

，如果你未能提交解決方案，這不提交下投票。

來源

2017-02-09 Rahul

SO不適合於人羣調試。目前還不清楚，你的問題的重點是什麼。 –

這很簡單。你看到演示或片段嗎？請參閱演示或代碼片段，然後嘗試點擊**追加項目按鈕**。 – Rahul

當我點擊附加項目按鈕打包添加三個項目。我只想添加一個項目。 – Rahul

我不明白你在這一行嘗試todo？

var $items = getItemElement().add(getItemElement()).add(getItemElement());

如果改成這樣

：

var $items = getItemElement();

只有一個元素將被添加。

Demo

來源

2017-02-13 09:42:15

謝謝你的回答。 – Rahul

奇怪的問題。只需從代碼中移除兩個元素即可。

var $items = getItemElement();

http://codepen.io/anon/pen/egbLxQ

來源

2017-02-13 09:43:42

感謝您的回覆和評論。 – Rahul

不客氣，但你應該在下次發佈大量代碼樣式-html之前自行調試。 –

包裝追加方法添加三個項目。如何添加一個項目？

回答

相關問題