Как показать блок после последнего блока в ряду?

Здравствуйте
Мой код fiddle

Не могу понять как реализовать, чтобы при клике на .item - показать блок <div class="block">block</div> (изначально он скрыт) после ряда.
Если кликнуть на итем4,5,6 - этом блок должен появиться после данного ряда

Пример
При клике на продукт - появляется блок карточка
Подскажите пожалуйста логику реализации
  • Вопрос задан
  • 91 просмотр
Решения вопроса 2
Exploding
@Exploding
wtf?
(изначально он скрыт) после ряда

Его нет изначально там, т.к. при ресайзе (поворот экрана например) страницы кол-во блоков в ряду будет меняться и довольно глупо - расставлять скрытые блоки заранее.
Блок появляется после определенного элемента. Значит для определения "последнего в ряду" вам необходимо вычислить ширину ряда и положение текущего блока, на котором кликнули. Дальше думаю уже все понятно.

Но зачем эта боль, если давно для таких целей используют всплывающие оверлеи?
Ответ написан
@artuh_a
Держи

$('.item').on('click', function() {
        $('.active').removeClass('active');
        $(this).addClass('active');

        var index = $(this).index('.item');
        var block = $('.block');

        function transferBlock(i) {
          block.insertAfter($('.item').eq(i));
        }

        switch((index + 1) % 3) {
          case (0):
            transferBlock(index);
            break
           case(1):
            transferBlock(index + 2);
            break
          case(2):
            transferBlock(index + 1);
            break;
        }
    });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы