Нужно «связать» два скрипта отзывающиеся по клику?

Question

[Чёкатилло]

Имеется заготовка
там два скрипта, которые как-то надо связать так, что бы при клике на кнопку .emb открывать блок .meta-data, который открывается снизу родительского блока .pinbox (в котором находится и кнопка .emb)

Там все практически правильно происходит, но не совсем..

Нужно при клике и открывать блок снизу и добавлять родительскому объекту .pinbox стиль, а затем при клике в любое место (но только не родительского объекта .pinbox) закрывать див который снизу и возвращать стиль родительскому блоку .pinbox обратно

Имеется вариант сокращения скриптов таким образом, но опять же, в этом варианте не хватает того, что бы блок .meta-data закрывался только по клику на область не относящуюся к родительскому .pinbox, а еще не хватает возвращения стиля родительскому .pinbox

Если сложно закрывать родительский .pinbox по любому месту не относящемуся к .pinbox, то хрен с ним!
Самое важное,- это возвращать стиль блоку .pinbox как будто никаких изменений скрипты и не вносили этому объекту
И еще, объектов на странице .pinbox много и все они содержат кнопку .emb и блок .meta-data
Поэтому надо, что бы скрипт действовал только на один выборочный кликом объект, а не на все разом

Помогите, кто чем может )
Спасибо за внимание!

Answer 1

[Роман]

$(function () {
    $('.emb').each(function () {
        $(this).on('click', function () {

            var block = $(this).next('.meta-data'),
                pinbox = $(this).parent('.pinbox');

            pinbox.toggleClass('pinbox_active');

            if (pinbox.hasClass('pinbox_active')) {
                block.slideDown(100);
                $(document).on('click', function (event) {
                    if ($(event.target).closest(pinbox).length)
                        return;
                    block.hide();
                    pinbox.removeClass('pinbox_active');
                    event.stopPropagation();
                });
            }
        });
    });
});

Попробуй так.
Верно работает? Или нет? Вот исходник: https://jsfiddle.net/rrzharikov/ng46k39q/

Comments

[Чёкатилло]

Все четко в примере Единственное я добавил скорость закрытия блока block.hide(100);
Но на самой странице чет не открывается блок вообще cg91812-wordpress-4.tw1.ru Не могли бы взглянуть )

[Роман]

> Но на самой странице чет не открывается блок вообще

А че там где, чего?

[Чёкатилло]

Роман Жариков: при скролле на странице вниз имеются превью постов- это и есть .pinbox Все остальное у них внутри А кнопка .emb снизу каждой превью в виде трех цветных точек

[Роман]

c2n.me/3HTFVqT

Ну как минимум нужно по готовности обернуть каждую кнопку на странице в each и навесить ей клик. Посмотрите внимательнее мой код просто

[Роман]

c2n.me/3HTGNew

К тому же ошибка в консоли, которая говорит что вот эта переменная в файле main.js не объявлена. Возможно тут копать надо. И зачем в файле целая куча $(function(){...}) и тому подобного фарша?)))

[Чёкатилло]

Роман Жариков: Извиняюсь конечно, а что такое each? )) в документации не понятно мне Как в него кнопку обернуть? Это как-то так?

[Чёкатилло]

<each class="emb"></each>

[Чёкатилло]

Роман Жариков: а про фарш и не знаю Именно это было еще в шаблоне задано c2n.me/3HTGNew

[Роман]

Все. Вот так сделайте — pinbox = $(this).parents('.pinbox'); Вместо parent( ) надо parents( )

[Чёкатилло]

Вообще изначально в теме много чего Я даже не имея опыта сайтостроения кое что заметил и удалял не задействованное

[Роман]

https://jsfiddle.net/rrzharikov/ng46k39q/1/ Вот здесь в блоке js берете код, я подправил и все заработает

[Чёкатилло]

Роман Жариков: ЕЕееее крутотень! СПАСИБИЩЕ )

[Роман]

Дмитрий: each( ) — это jquery метод, который берет все те элементы с определенным классом, коих на странице множество и тупо бегает по каждому, применяя все то что вы опишете в ней ( в callback- функции)

[Роман]

Еще момент, там видать при скролле, следующие элементы подгружаются аяксом, так что функция наша на следующие элементы уже действовать не будет. Тут нужно идти в то место, где скрипт принимает данные, js и в теле функции заново пробегаться функцией each( ) для новой пачки элементов и событие клика. Ну как то так, вообщем копаться надо и смотреть, удачи! ;)

[Чёкатилло]

Роман Жариков: блиииин (( Спасибо

[Чёкатилло]

Роман Жариков: Есть вопросец Предлагаю присоединиться По клику на кнопку активировать фиксированный фон позади блока, в котором была нажата кнопка? ))