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');
        }
    });
});