ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer

Почему после выполнения всего алгоритма условий один раз, следующий клик после возврата к стандарту не срабатывает?

Немного не могу понять - где баг.
Есть такой код. Я закомментировал каждую строку, чтоб не пришлось никому разбираться, что происходит.
Это кусок алгоритма поведения табов в обёртке each() (ибо модуль табов будет не один в проекте). Весь алгоритм чуть больше. Все переменные определены - с ними нет никаких ошибок. Но скрипт немного замысловатый. Сам клик (после прохода до самого глубокого $(this).html('показать ещё') ) срабатывает повторно. Но условие (thisMaxHeightNum >= activeTabHeight) уже не работает, хотя вывод в консоль доказывает, что высота списка табов меньше активного таба, и что высота списка должна обновляться заново.

var showMoreBtn = thisTabsWrapper.find('.showMoreBtn'); //хватаем кнопку.
        if(showMoreBtn != undefined){ //если она схватилась
            var thisTabItemsWrapper = thisTabsWrapper.find('.tablist'); // хватаем список табов
            var defaultMaxHeight = thisTabItemsWrapper.css('max-height'); // сохраняем стандартную высоту списка табов
            showMoreBtn.click(function(){ //если кликнули по кнопке
                var activeTabHeight = thisTabsWrapper.find('.tab.active').height(); //хватаем высоту активного таба
                var thisMaxHeight = thisTabItemsWrapper.css('max-height'); // хватаем высоту списка табов
                var thisMaxHeightNum = Number(thisMaxHeight.replace(/\D+/g,"")); //высоту списка табов конвертаем в число
                console.log(activeTabHeight);
                console.log(thisMaxHeight);
                if(thisMaxHeightNum >= activeTabHeight){ //если высота списка табов больше или равна активному табу
                    $(this).html('показано всё (скрыть)'); //меняем текст кнопки
                    $(this).click(function(){ // и по нажатию на неё
                        thisTabItemsWrapper.css('max-height', defaultMaxHeight); //меняем высоту списка табов на дефолт
                        $(this).html('показать ещё'); // меняем текст кнопки на стандартный
                    })
                }else{ //если высота списка табов меньше активного таба
                    thisMaxHeightNum += 300; // прибавляем высоту списка табов
                    thisTabItemsWrapper.css('max-height', thisMaxHeightNum +'px'); // и обновляем её на фронте
                }
            });
        }


Подскажите, пожалуйста - где я накосячил? Уже час голову чешу. Весь код в дебаггере отшлифовал и никак понять не могу что я упустил.
Всем спасибо за ответы.
  • Вопрос задан
  • 143 просмотра
Решения вопроса 1
@axeax
$(this).click(function(){ // и по нажатию на неё
зачем еще раз событие клика навешивать? Оставьте только
thisTabItemsWrapper.css('max-height', defaultMaxHeight); //меняем высоту списка табов на дефолт
$(this).html('показать ещё'); // меняем текст кнопки на стандартный

Все равно если условие не выполнится то и этот кусок кода не сработает

upd:: дошло зачем
замените это
$(this).html('показано всё (скрыть)'); //меняем текст кнопки
    if((this).html() == 'показано всё (скрыть)'){
    	thisTabItemsWrapper.css('max-height', defaultMaxHeight); //меняем высоту списка табов на дефолт
        $(this).html('показать ещё'); // меняем текст кнопки на стандартный
    }

и пишите
if($(this).html() == 'показано всё (скрыть)'){
    	thisTabItemsWrapper.css('max-height', defaultMaxHeight); //меняем высоту списка табов на дефолт
        $(this).html('показать ещё'); // меняем текст кнопки на стандартный
    }
    else $(this).html('показано всё (скрыть)'); //меняем текст кнопки

конечно $(this).html() == 'показано всё (скрыть)' не есть хорошо, лучше загонять значение в какой нибудь data-button-state = 'default | hide'
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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