Почему JS код выполняется не порядку?

Question

[Дмитрий]

Всем привет.
У меня имеется вот такой код. Каждый раз по клику на один из блоков-родителей проверяется, нет ли уже других активных элементов и затем вешается класс на соответствующий родителю дочерний элемент. При повторном клике на родителя активного элемента класс убирается через через toggleClass. Вроде как всё работает, но столкнулся с проблемой: в моём коде СНАЧАЛА должны убираться классы .act, а ПОТОМ уже должен срабатывать тоггл - у меня же наоборот, сначала присваивается класс, а потом убирается у остальных. Как пофиксить?

Пример на фиддле

P.S. Условие внизу - это отдельный костыль для мобильного отображения и по сути отношения к делу не имеет, но для полноты картины привёл и его

jQuery('.filter_parent').click(function(){
        
        var myvar = jQuery(this).attr('id');
        console.log(myvar);
        
        jQuery(".hiddenblock").not(jQuery("#c-" + myvar)).removeClass('act');
        jQuery("#c-" + myvar).toggleClass('act');
        
        
        if(window.matchMedia('(max-width: 768px)').matches)
    		{
    			switch(myvar) {
    				case 'fp1':
    					jQuery( "#fp2" ).after( jQuery( "#c-fp1" ) );
    				
    				case 'fp2':
    					jQuery( "#fp2" ).after( jQuery( "#c-fp2" ) );
    					
    				case 'fp3':
    					jQuery( "#fp4" ).after( jQuery( "#c-fp3" ) );
    					
    				case 'fp4':
    					jQuery( "#fp4" ).after( jQuery( "#c-fp4" ) );
    					
    				case 'fp5':
    					jQuery( "#fp6" ).after( jQuery( "#c-fp5" ) );
    					
    				case 'fp6':
    					jQuery( "#fp6" ).after( jQuery( "#c-fp6" ) );
    			}
    		    
    		}
        
    	})

Comments

[Алексей Уколов]

Сделайте полный пример на jsfiddle, пока непонятно, в чём может быть проблема - код выглядит нормально.
Может, у вас два таких обработчика стоит или кликаете два раза подряд?

[Дмитрий]

Алексей Уколов: да, конечно. Там изображения не подтягиваются, но в целом всё работает https://jsfiddle.net/wdrefbvd/

[Андрей Токмаков]

Разметку еще покажите для примера

[Дмитрий]

Андрей Токмаков: прикрепил ссылку на фиддл в посте, там полностью всё

Answer 1

[Андрей Токмаков]

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

setTimeout(function (){
    jQuery("#c-" + myvar).toggleClass('act')
    }, 1000);

Это Вам надо? Если я правильно Вас понял

Comments

[Дмитрий]

крутяк, спасибо!

[Алексей Самсонов]

крутяк? таймаут на сие действо?
Далеко пойдете :(

[Дмитрий]

Алексей Самсонов: Если вы знаете, как решить задачу более грамотно, я буду очень признателен за помощь но пока это единственный вариант, пусть и люто костыльный

[Алексей Самсонов]

я в целом давно отказался от жиквери, но как минимум строчку:
jQuery(".hiddenblock").not(jQuery("#c-" + myvar)).removeClass('act');
вроде как с уверенностью можно заменить на
jQuery(".hiddenblock").not("#c-" + myvar).removeClass('act');

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

[Алексей Самсонов]

как раз заодно качнете скилл css-анимации )

[Андрей Токмаков]

Алексей Самсонов: Понятно, что это не айс совсем, но какой вопрос такой и ответ. А если уж с начала самого рассматривать, то от одного вида кучи "jQuery" уже становится страшно. Я вот честно до сих пор не понял что этим пытается сделать автор, если это обычный аккордеон, то есть куча готовых решений, как с использованием js так и на css

[Дмитрий]

Алексей Самсонов: Андрей Токмаков: Куча "jQuery" объясняется очень просто: у клиента сайт на джумле, в которой уже понапихано всякого, в том числе и подключёна jQuery, решать почему именно вываливается "$ is not a function", у меня нет ни времени, ни желания - за это никто не платит. Что я хочу получить в итоге: вот наглядный пример: www.bmw.ua , прямо под слайдшоу. Видно, что на десктопной версии блоки родители расположены в два ряда, и содержимое открывается между рядами. В то же время, в мобильной версии родители собираются по два в строку, и содержимое должно показываться также между рядами. Готового решения я не нашёл, поэтому понадобилось нагородить свой велосипед.

[Андрей Токмаков]

Дмитрий: надо было css3 использовать для этого, зря в jquery полезли