@MaksimLav

Как связать события двух кнопок с одинаковым data атрибутом?

Есть контейнер с двумя checkbox-ами bootstrap (по нажатию добавляется класс active):
<div class='btn-group'>
<label data-item="1" data-action="click" class="btn">
    <input data-filter-name="фильтр 1" type="checkbox"> 1
</label>
<label data-item="1" data-action="click" class="btn">
    <input data-filter-name="фильтр 1" type="checkbox"> 2
</label>
</div>


// по нажатию на checkbox
    $('[data-action="click"]').click(function() {
        //сохраняю этот элемент
        var elem = $(this);
        //Сохраняю ID характеристики
        var itemID = $(this).data('item');
        // сохраняю в переменную контейнер для блоков
        var filterItemConteiner = $('.tags');
        //проверяю активен ли checkbox
        if ($(this).hasClass('active')) {
            //если активен то удаляю блок в линии с таким id
            $('.tags').find("[data-item='" + itemID + "']").remove();
        } else { // если не активен то добавляю блок в линию
            //сохраняю в переменную данные названия
            var filterName = $(this).find('[data-filter-name]').data('filter-name');
            // ищу в специфификации фильтра такой же элемент исключая нажатый и нажимаю на него
            $('.btn-group').find("[data-item='" + itemID + "']").not(elem).click();
            // добавляю в контейнер блок с названием из переменной filterName и ID характеристики
            filterItemConteiner.append('<div data-item="'+itemID+'" class="tags-item">'+filterName+'</div>');
        }; 
});

Действия:
По нажатии на checkbox, если он не активен в блоке .tags создается блок с таким же значением data-item как и у нажатой кнопки.
В контейнере может быть несколько checkbox с одинаковым data-item.
Использую такую конструкцию:
$('.btn-group').find("[data-item='" + itemID + "']").not(elem).click();
(Ищу в контейнере data-item с таким же значением, исключая нажатый, и нажимаю на найденный) создается рекурсия - найденная кнопка так же ищет другую кнопку (только что нажатую) и они ссылаются друг на друга.

Как связать события двух разных объектов?
ссылка примера:
https://codepen.io/maksimlavrenyuk/pen/zMyBWY
  • Вопрос задан
  • 206 просмотров
Пригласить эксперта
Ответы на вопрос 2
@dimoff66
Кратко о себе: Я есть
Не нажимайте ничего программно, просто вынесите нужный функционал, для которого вы делаете программный click() в отдельную функцию, которая не будет искать другие элементы.
Ответ написан
Комментировать
Revencu
@Revencu
var elem_index = $(this).index()
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы