1

画像を表示するWebページに無限スクロールを実装しています。画像は石積みを使用して位置合わせされます。最初にページが読み込まれるとき、私は#containerdivに10枚の画像しか入れませんでした。また、Chromeスクリプトコンソールでエラーが発生することなく、以下のコードを使用してすべての画像が適切に配置されます。

var $container = $('#container');
        $container.imagesLoaded(function(){
        $('#container').masonry({
          itemSelector: '.box',
          columnWidth: 200,
          isAnimated: true
        });
    });

しかし、ユーザーが下にスクロールすると、

$.ajax({
         url: "load.php?offset="+1+"&quantity="+1,
         success: function(html){
         if(html){
                  var $container = $('#container');
                  var $test = "<div>even doing this causes error </div>";
              $container.append($test).masonry('appended',$test);
        }
  });

これで、下にスクロールすると、Chromeコンソールで以下のエラーが発生し、追加された画像がスタックされて表示されます。

 Uncaught TypeError: Object <div class....... </div>  has no method filter
4

1 に答える 1

13

コメントで述べたように、jQueryを使用する場合に表示されるエラーメッセージは一般的なものです。filter()jQueryオブジェクトのメソッドです。$testmasonryは、変数内にあるオブジェクト（この例ではStringオブジェクト）でそれを呼び出そうとしているようです。基本的に、それは呼び出します

"<div>even doing this causes error </div>".filter(...)

エラーが発生します。

masonry()動作させるには、String（またはその他のJavaScriptオブジェクト）ではなく、jQueryオブジェクトをメソッドに渡す必要があります。たとえばAJAX呼び出しの結果として文字列がある場合は、jQuery関数を使用して文字列をjQueryオブジェクトに変換できます。あなたの例のために：

$test = $("<div>even doing this causes error </div>");

これにより、石積みで使用できるjQuerydivオブジェクトが作成されます。

$もう1つのヒント：すべてのJavaScript変数の前に記号を付けるようです。これはあなた次第ですが、jQueryオブジェクトを保持する変数にのみプレフィックスを付け$、他の変数にはプレフィックスを付けないことをお勧めします。したがって、文字列の場合は、を使用しますvar test = "String";。それは私が非常に便利だと思った慣習です。また、他の人があなたのコードを理解しやすくなります。

于 2012-09-09T08:25:25.830 に答える