Question

我在我的网页上实现无限滚动，显示图像。使用masonry对齐图像。最初，当页面加载时，我只在#container div中放入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

Answer 1

正如我在评论中所说，在使用jQuery时，您获得的错误消息是典型的。 filter()是jQuery对象的方法。砌体似乎试图在$test变量中的任何对象上调用它，在您的示例中，该变量是一个String对象。基本上，它调用

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

会产生错误。

为了使工作正常，您必须将masonry()方法传递给jQuery对象而不是String（或任何其他JavaScript对象）。如果你有一个字符串，例如作为AJAX调用的结果，您可以通过使用jQuery函数将其转换为jQuery对象。以你的例子：

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

这会创建一个jQuery div-object，它可以与砌体一起使用。

另一个提示：您似乎在所有JavaScript变量前面加上$符号。虽然这取决于您，但我建议仅为包含$的jQuery对象的变量添加前缀，并且不要为任何其他变量添加前缀。因此，对于字符串，您只需使用var test = "String";。这是我发现的非常有用的惯例。此外，它还可以让其他人更容易理解您的代码。

在Masonry的container.append上获取错误Uncaught TypeError：Object没有方法过滤器

1 个答案: