JavaScript добавить с ума

Question

JavaScript добавить с ума

0

Я пытаюсь создать простую 3-х сетчатую галерею, изображения внутри нее все с разной высотой, и я был после плиточной галереи... Поэтому я создал тот, который работает с немного JavaScript.

Однако, когда я попытался добавить еще одну галерею на той же странице, произошло что-то странное, живое превью здесь: http://loai.directory/test/gallery

HTML, CSS и JS можно найти полностью в этом jsfiddle: http://jsfiddle.net/aY5Gu

Как вы можете видеть в режиме предварительного просмотра, все gridElemetns в grid3 добавляются к grid3 во всех галереях ThreeGrid! После попытки отладки я пришел к выводу, что проблема связана с 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);
      }
   }

Что происходит не так? Кажется, я не могу понять, что там не так.

Leo 13 апр. 2014, в 15:29

Источник

0

Ваш вопрос действительно сбивает с толку. Чего ты ожидал? Вы выбираете по классу, поэтому «gridElement» всегда будет включать все элементы внутри всех контейнеров «.grid3».
Pointy 13 апр. 2014, в 13:06
0

Да, это то, что должно произойти, но сейчас происходит то, что все gridElemtns внутри всей grid3 будут добавляться к каждой grid3 в каждой галерее ... так, например, как вы можете видеть, grid3 во второй галерее также появляется в сетка одна и тд ..
Leo 13 апр. 2014, в 13:08
0

Да, это именно то, что говорит ваш код. Если вы хотите выбрать отдельные конкретные элементы, вы должны использовать атрибуты идентификатора и уникальные значения идентификатора.
Pointy 13 апр. 2014, в 13:09
0

Вы пытаетесь создать жидкостную сетку, зависящую от ширины сетки?
Claudio Santos 13 апр. 2014, в 13:19
0

да, я уже создал один живой пример: loaidesign.co.uk/portfolio попытайтесь изменить размер экрана, он использует тот же код. Но я обнаружил, что если я добавлю еще одну галерею, эта проблема
Leo 13 апр. 2014, в 13:24
0

почему вы не используете только CSS, чтобы получить такое поведение, посмотрите здесь ?
Claudio Santos 13 апр. 2014, в 13:27

Показать ещё 4 комментария

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Ваш вопрос действительно сбивает с толку. Чего ты ожидал? Вы выбираете по классу, поэтому «gridElement» всегда будет включать все элементы внутри всех контейнеров «.grid3».
Да, это то, что должно произойти, но сейчас происходит то, что все gridElemtns внутри всей grid3 будут добавляться к каждой grid3 в каждой галерее ... так, например, как вы можете видеть, grid3 во второй галерее также появляется в сетка одна и тд ..
Да, это именно то, что говорит ваш код. Если вы хотите выбрать отдельные конкретные элементы, вы должны использовать атрибуты идентификатора и уникальные значения идентификатора.
Вы пытаетесь создать жидкостную сетку, зависящую от ширины сетки?
да, я уже создал один живой пример: loaidesign.co.uk/portfolio попытайтесь изменить размер экрана, он использует тот же код. Но я обнаружил, что если я добавлю еще одну галерею, эта проблема
почему вы не используете только CSS, чтобы получить такое поведение, посмотрите здесь ?

Unamata Sanatarai · Answer 1 · 2014-04-13T10-49-00.000Z

Это потому, что .threeGrids и .grid1... появляются более одного раза на вашей странице. Поэтому jquery автоматически добавляет вещи всем из них.

Попробуйте выбрать что-то вроде:

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

Таким образом вы вводите каждый .wrapper отдельно и обрабатываете только элементы, которые внутри него.

Просто попробовал, и это не сработало - он добавил все элементы из всех grid1,2 и 3 в grid 3 в первой галерее