Question

概述：

我正在使用Masonry Cascading网格布局库并添加Masonry Remove Method。此方法允许点击商品的任何部分 - ＆gt;删除它 - ＆gt;并且很好地依赖于布局。

问题：

我想通过点击项目中的特定区域（即按钮）来删除项目（<div class="item 1"></div>“粉红色框”）仅。

我试图在JavaScript文件中操作该函数，但找不到我的问题的解决方案是不成功的。（我2个月前第一次开始建立一些网站，所以对jS或jQ的经验很少）

问题：

您对我如何解决此问题有任何疑问吗？

以下是jsfiddle的链接，以简要概述我想要实现的目标：http://jsfiddle.net/intimur/SfU5T/22/

HTML

<div class="masonry">
 <div class="item 1"></div>  
 <div class="item 2">      
     <div class="remove-btn"> Click here to remove item </div>      
 </div>
</div>

的JavaScript

// http://masonry.desandro.com/masonry.pkgd.js added as external resource
// added http://rawgithub.com/desandro/classie/master/classie.js

docReady( function() {

  var container = document.querySelector('.masonry');
  var msnry = new Masonry( container, {
    columnWidth: 200
  });

  eventie.bind( container, 'click', function( event ) {
    // don't proceed if item was not clicked on
    if ( !classie.has( event.target, 'item' ) ) {
      return;
    }
    // remove clicked element
    msnry.remove( event.target );
    // layout remaining item elements
    msnry.layout();
  });

});

Answer 1

我还没有检查过classie.js，因为我不知道是否真的需要通过点击按钮删除该项目。只需使用：

调整Fiddle即可

$(document).on('click', ".remove-btn", function () {
    msnry.remove($(this).parent(".item"));
    msnry.layout();
});

如果你已经在实际的DOM中有.remove-btn，则没有必要将click事件委托给$（document）中的.remove按钮，所以如果是这种情况，这可以简化为

 $(".remove-btn").click(function () {
    msnry.remove($(this).parent(".item"));
    msnry.layout();
});

此版本已调整Fiddle。

通过单击按钮删除Masonry“删除方法”中的项目

1 个答案: