javascript-jQuery Masonry删除功能示例

2019-10-31 19:34:25 阅读：189 来源： 互联网

我已经在我们的网站上实现了jQuery砌体,并且效果很好.我们的网站是动态的,用户必须能够添加/删除砌筑盒.该站点有一个添加示例,但没有删除示例.查询我们的数据库,返回x个项目.循环遍历它们,并显示它们.这是一个代码示例：(我们使用F3框架,而F3：repeat是它的循环机制.)

<div id="container" class="transitions-enabled clearfix" style="clear:both;">
   <F3:repeat group="{{@productItems}}" value="{{@item}}">
      <div id="{{@item.itemId}}">
         <div class="box">
            <div class="view"> <!-- for css -->
               <a onclick='quickRemove("{{@item.itemId}}")>
                  <img src="{{@item.pic}}" />
               </a>
            </div>
            <p>
            {{@item.title}}
            </p>
         </div> 
      </div>
   </F3:repeat>
</div>

在javascript代码中,商品ID号是唯一的,并传递到函数中.也是区分每个框的div id#.我尝试了各种组合和方法,但似乎无法使它正常工作.

function quickRemove(item){
    var obj = $('#'+item+'').html(); // item is the product id# but also the div id#
    $('#container').masonry('remove',obj);

    $('#container').masonry('reloadItems');
    $('#container').masonry('reload');
}

有没有人在那里成功地删除了一个项目,您是如何做到的？
谢谢.

解决方法:

当前,您似乎正在将完整的html字符串传递给砖石移除方法.通过不包含.html()的方式将其传递给实际的jQuery包装元素

function quickRemove(item){
    var obj = $('#'+item+''); // item is the product id# but also the div id#
    $('#container').masonry('remove',obj);

    $('#container').masonry('reloadItems');
    $('#container').masonry('reload');
}

标签：jquery-masonry,javascript,jquery
来源： https://codeday.me/bug/20191031/1978136.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-jQuery Masonry删除功能示例