4

Ajax 経由でアイテムが削除されたときに Masonry を更新するにはどうすればよいですか? これは、アイテムを削除するために使用しているコードです。

if($deletes = $('a[rel=delete]')) {
    $deletes.click(function() {
        if(!window.confirm('Are you sure you wish to delete this picture?'))
            return false;
        $t = $(this);
        $.post(
            $t.attr('href'),
            {},
            function(data) {
                if(data == "success")
                    $t.parents('.deleteable:first').fadeOut();
            }
        );
        return false;           
    });
}

更新が必要な理由は、アイテムが削除された後に生じるスペースを削除するためです。

4

4 に答える 4

5

コールバックを追加して、削除された要素がフェードアウトしたらfadeOut()実際に呼び出してから、コンテナーを再度呼び出します。.remove().masonry()

于 2011-03-06T00:35:04.770 に答える
1

セレクターでもう一度呼び出すだけです。再度呼び出されたかどうかを確認するためのチェックがあるようです。

...snip...
  // checks if masonry has been called before on this object
  props.masoned = !!$wall.data('masonry');
...snip...

saveOptionsまた、リコールにも対応しているようですので、お勧めです。気にしないでください、それはデフォルトでそうするようです（D'oh！）

于 2011-03-05T23:52:21.147 に答える
1

フェードアウト コールバックで masonry を再度呼び出します。これを自分で簡単にして、石積みの初期化を関数で行います。オプションをコールバック スコープに持ち込む必要がないように、そこでオプションを定義します。

そのようです

$(function(){

  var $bricks = $('your > elements');

  function BuildWall(){
    $bricks.masonry({your:'options'});
  }

  BuildWall();


 //Your code modified
 if($deletes = $('a[rel=delete]')) {
     $deletes.click(function() {
        if(!window.confirm('Are you sure you wish to delete this picture?'))
           return false;
         var $t = $(this);
         $.post(
            $t.attr('href'),
            {},
            function(data) {
                if(data == "success")
                    $t.parents('.deleteable:first').fadeOut(function(){
                       //This is faster than $(this).remove();
                       $(this).empty().remove();
                       //Reset Masonry
                       BuildWall();
                    });
            }
        );
        return false;           
    });
 }
});
于 2011-03-06T01:16:05.680 に答える