Ответы пользователя по тегу JavaScript
  • Почему некорректно срабатывает функция .hasClass?

    pickHabr
    @pickHabr
    Костыльных дел мастер
    $('.nextstep .next')
    - вернет все html элементы с такими классами
    дальше ты работаешь со списком как с одним элементом, ожидаешь что код будет разбирать составляющие списка по отдельности
    $(document).ready(function() {
           // проходим наши элементы циклом
    	$('.nextstep .next').each(function(i, obj) {
    		// проверяем условия для каждого элемента отдельно
    		if ($(obj).hasClass('active')) {
    			// применяем классы к соответствующему спану
    			$(obj).find('span').addClass('yes');
    		} else {
    			$(obj).find('span').addClass('no');
    		};
    	});
    });
    Ответ написан
  • Как корректно валидировать поля пароль?

    pickHabr
    @pickHabr
    Костыльных дел мастер
    Переделать функцию checkPassword, применять проверку по регулярке к каждому элементу отдельно, проверку на совпадение только при вводе подтверждения пароля

    data-passwordrepeat="Проверьте правильность пароля"


    ...
    const passwordMessage = _element.dataset.password;
    const passwordMessageRepeat = _element.dataset.passwordrepeat;
    ...
    if(passwordMessage) {
                this.checkPassword(_element, passwordMessage, successMessage);
            }
            if(passwordMessageRepeat) {
                this.checkPassword(_element, passwordMessage, successMessage);
                this.matchingPasswords(passwordMessage, successMessage);
            }
    ...
    this.checkPassword = function (_element, message, successMessage) {
            const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
            const checkPassByRegExp = passwordRegExp.test(_element.value);
    
            if (!checkPassByRegExp) {
              this.createErrorTemplate(_element, message);
            } else {
              this.createSuccessTemplate(_element, successMessage);
            }
        }
    
        this.matchingPasswords = function (message, successMessage) {
            const allPasswords = _form.querySelectorAll('input[type="password"]');
            const arrPasswordValues = Array.from(allPasswords).map(item => item.value.trim());
            const checkPassByUniqueness = new Set(arrPasswordValues).size === 1;
    
            if (!checkPassByUniqueness) {
                allPasswords.forEach((value) => this.createErrorTemplate(value, message));
            } else {
                allPasswords.forEach(value => this.createSuccessTemplate(value, successMessage));
            }
        }


    Что-то типо такого, над качеством кода сам покури

    PS оффтоп
    this.createErrorTemplate = function (_element, message) {
            const parent = _element.closest(`.${labelClass}`);
            parent.classList.add(errorClass);
            parent.classList.remove(successClass);
            parent.querySelectorAll(`.${errorItemClass}, .${successItemClass}`).forEach(item => item.remove());
            parent.insertAdjacentHTML('beforeend', `<small class=${errorItemClass}>${message}</small>`);
        }
    
        this.createSuccessTemplate = function (_element, message) {
            const parent = _element.closest(`.${labelClass}`);
            if (parent) {
                parent.classList.add(successClass);
                parent.classList.remove(errorClass);
                parent.querySelectorAll(`.${errorItemClass}, .${successItemClass}`).forEach(item => item.remove());
                parent.insertAdjacentHTML('beforeend',`<small class=${successItemClass}>${message}</small>`)
            }
        }
    Ответ написан
    Комментировать
  • Почему добавленная через JS ссылка срабатывает только на второй клик?

    pickHabr
    @pickHabr
    Костыльных дел мастер
    Проблема в эвенте change, при первом клике сбрасывается фокус с элемента и срабатывает событие change, которое переделывает div с ссылками. Я бы поменял
    _city_search_name.addEventListener('change', searchCity);
    _city_search_name.addEventListener('keyup', searchCity);

    на
    _city_search_name.addEventListener('input', searchCity);
    Ответ написан
    1 комментарий
  • Как сделать scrolltop у аккордиона?

    pickHabr
    @pickHabr
    Костыльных дел мастер
    Попробуй так

    const openAccordion = (accordion) => {
        // твой код
        accordion.scrollIntoView();
    };


    https://developer.mozilla.org/ru/docs/Web/API/Elem...
    Ответ написан
    Комментировать
  • Выполняются оба метода из двух разных форм. Как исправить?

    pickHabr
    @pickHabr
    Костыльных дел мастер
    попробуй поменять button type="submit" на button type="button" и повесить событие не на $('#form-import').submit а на $('#button-import').click

    перед этим можешь сразу проверить верстку на странице через инструменты разарботчика, что у тебя эти 2 формы действительно вписываются как 2 разные формы, а не херится верстка
    Ответ написан
    Комментировать
  • Почему при нажатии на кнопку слайдера картинка пропадает js?

    pickHabr
    @pickHabr
    Костыльных дел мастер
    Привет!

    Коммент выше решает твою проблему, а я с оффтопным моментом. Как-то странно что при движении влево переменная увеличивается, а при движении вправо уменьшается :D я бы поменял
    upBtn.addEventListener("click", () => {
      let index = cardIndex + 1;
      if (index >= cards.length) {
        index = 0;
      }
      show(index);
    });
    
    downBtn.addEventListener("click", () => { 
      let index = cardIndex - 1;
      if (index < 0) {
        index = cards.length - 1;
      }
      show(index);
    });
    Ответ написан
    1 комментарий
  • Как сделать проверку на корректную вложенность в скобки ((([])){})?

    pickHabr
    @pickHabr
    Костыльных дел мастер
    /**
     * @param {string} s
     * @return {boolean}
     */
    var isValid = function (s) {
        //hash function for partheses
        let map = { "}": "{", "]": "[", ")": "(" };
        let temp = [];
    
    
    
        //Iterates
        for(i in s){
            //if a index that matches a closing bracket - continue
            if(s[i] in map){
                //if the temp isn't empty, and the top of the stack is that closing bracket - pop it
                if(temp.length > 0 && temp[temp.length-1] === map[s[i]]){
                    temp.pop();
                }
                //else we break it - return false
                else{
                    return false;
                }
            }
            //else we push the opening bracket onto the stack
            else{
                temp.push(s[i]);
            }
        }
        //else we return true if the temp is empty
        return temp.length === 0;
    };


    Прямо в литкоде есть решения, можно открыть Solutions, отфильтровать по языку и читать с описанием, можно перейти к all submissions и выбрать самое быстрое решение.
    Ответ написан
    5 комментариев