Question

我正在尝试构建一个简单的3网格图库，其中的图像都具有不同的高度，我在一个平铺的图库之后......所以我创建了一个可以使用JavaScript的图片。

但是，当我尝试在同一页面中添加另一个图库时，发生了一些奇怪的事情，请在此处进行实时预览：http://loai.directory/test/gallery

HTML，CSS和JS可以完全放在这个jsfiddle中：http://jsfiddle.net/aY5Gu

正如您在实时预览中看到的那样，grid3中的所有gridElemetns都将附加到所有threeGrid图库中的grid3！在尝试调试之后，我得出结论，问题来自JS：

//Three Grids System
   var gridElement = $(".gridElement", ".grid3");
   GalleryGrid(); $(window).resize(GalleryGrid);
   function GalleryGrid() {
      var grid3 = $('.threeGrids .grid3');
      var width = $(window).width();
      if (width < 1024 && width > 770) {
         var grid1 = $('.threeGrids .grid1');
         var grid2 = $('.threeGrids .grid2');

         for (var i = 0; i < gridElement.length; i++) {
            if (i < gridElement.length / 2) {
               grid1.append(gridElement[i]);
            } else {
               grid2.append(gridElement[i]);
            }
         }
      } else {
         grid3.append(gridElement);
      }
   }

出了什么问题？我似乎无法弄清楚那里出了什么问题。

Answer 1

这是因为.threeGrids和.grid1 ...在您的网页上出现了多次。因此，jquery会自动将内容添加到所有内容中。

尝试通过以下方式进行选择：

$('.wrapper').each(
  function(){
    var grids = $(this).find('.threeGrids');
    (...do manipulation with grids...)
  }
);

这样，您可以单独输入每个.wrapper并仅处理其中的元素。

JavaScript追加疯狂

1 个答案: