パッカー追加メソッドは3つの項目を追加します。 1つのアイテムを追加するには？

Question

私は動的にパックの項目をclickの方法で追加しようとしています。すべてのすべてのものは、1回のクリック以外では正常に動作していますパックリーを追加3つ新しいアイテム。私の質問は、ワンクリックで1つのアイテムを追加する方法ですか？

Method

Demo

感謝。ページの読み込みグリッド項目の後

編集

はファイブです。下の図を参照してください。

はいつ 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>

私の質問：

がどのように項目を追加制御することができますか？私は動的に追加したいの項目ではない3つのの項目は、単一のclickにあります。

注：あなたはそれのためのソリューションを提出しなかった場合

がダウン票を提出しないでください。

Answer 1

私はこの行でやりたいことを理解していませんか？

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

あなたは、このように変更した場合：

var $items = getItemElement();

一つだけの要素が追加されます。

Demo

Answer 2

奇妙な質問です。コードから2つの要素を削除するだけです。

var $items = getItemElement(); 

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