JQuery: один обратный вызов для всего класса, независимо от того, сколько элементов он содержит

Question

Я почти уверен, что этот вопрос уже был задан (но я не нашел решения).

Что ж, моя проблема в том, что обратный вызов повторяет свою работу для каждого элемента класса.пример:

$('a').click(function() {
    var id = $(this).attr('rel');
    $('.jsForm').not('#'+id).slideUp('slow', function() {
        $('#'+id).slideToggle('slow');
    });
});

класс jsForm применяется к 3 различным элементам div, каждый из которых имеет уникальный идентификатор.Идентификатор происходит от тега a в атрибуте rel.

цель этого кода состоит в том, что все элементы div, за исключением элемента с идентификатором, по которому щелкнули мышью, скользят вверх.После того, как другие div скользили вверх, основной div должен переключаться.

Но если у меня есть 3 div, функции обратного вызова вызываются 2 раза и переключаются дважды.

есть возможность избежатьчто каждый элемент класса получает собственную функцию обратного вызова?Одна функция обратного вызова для всего класса будет в порядке для меня.

Я надеюсь, вы понимаете мой вопрос.спасибо.

Answer 1

Вы можете использовать счетчик для выполнения только после последнего слайда:

$('a').click(function() {
    var id = $(this).attr('rel');
    var size = $('.jsForm').length - 1;
    var count = 0;
    $('.jsForm').not('#'+id).slideUp('slow', function() {
        if (++count == size) {
          $('#'+id).slideToggle('slow');
        }
    });
});

Answer 2

Вы можете сделать что-то вроде этого, когда вы проверите обратный вызов, что вы достигли желаемого состояния. Здесь, например, видна только одна jsForm.

$('a').click(function() {
    var id = $(this).attr('rel');
    $('.jsForm').not('#'+id).slideUp('slow', function() {
        if($('.jsForm:visible').length == 1){
          $('#'+id).slideToggle('slow');
        }
    });
});