包装追加方法添加三个项目。如何添加一个项目？

我尝试动态添加包装项目通过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之前自行调试。 –

包装追加方法添加三个项目。如何添加一个项目？

回答

相关问题