Ответы пользователя по тегу JavaScript
  • Нормальный скрипт для новичка в JS?

    dimovich85
    @dimovich85 Куратор тега JavaScript
    https://u-academy.net/
    let tabsBtn = document.querySelectorAll('.services__tabs-item');
    let tabsContent = document.querySelectorAll('.services__item');
    
    for (let i = 0; i < tabsBtn.length; i++) {
        tabsBtn[i].addEventListener('click', function(evt) {
            evt.preventDefault();
            for (let j = 0; j < tabsContent.length; j++) {
                 tabsBtn[j].classList.remove('services__item--active');
                 tabsContent[j].classList.remove('services__tabs-item--active');
             }
            let index = tabsBtn.indexOf(this);
            this.classList.add('services__tabs-item--active');
            tabsContent[index].classList.add('services__item--active');
        }); 
    }


    По идее, если я все правильно понял, то такой код должен работать.
    Суть в том, что иттератор передавать в прослушку события бессмысленно, цикл пройдет и закончится, значение иттератора будет больше длины массива, и это произойдет за доли секунды, а когда пользователь кликнет по табу вызовется функция с иттератором, который будет во-первых всегда статичным, а во-вторых - больше длины массива (иначе, цикл бы продолжался), поэтому Ваш код всегда будет давать андефайнд. Вместо иттератора лучше использовать this, когда человек кликнет на кнопку в this попадет текущая кнопка, по которой кликнули, и мы сначала удаляем активный класс у всех кнопок и контента, а потом текущей кнопке его назначаем. Второе, как я понимаю, что индекс кнопки и индекс таба должен совпадать, иначе код надо будет усложнить. Если индексы совпадают, то создаем локальную переменную, которая вернет индекс кнопки, по которой кликнули, просто находим индекс массива кнопок по объекту this, то есть по кнопке, на которой произошло событие, далее берем этот индекс и находим элемент по этому индексу из массива контента, и ему назначаем активный класс. В результате меньше функций.
    Если индексы НЕ совпадают, тогда можно пройтись по всем табам и кнопкам и задать им дата атрибуты, а потом при клике вытаскивать по дата атрибутам нужные элементы и назначать классы, а вот удалять классы, думаю оптимально перед тем, как задать, и удалять классы у всех, а потом активным их задавать.
    Ответ написан
  • Как собрать и разобрать строку?

    dimovich85
    @dimovich85 Куратор тега JavaScript
    https://u-academy.net/
    https://jsfiddle.net/8tccxeyd/
    Вот, коряво, на скорую руку, но суть такая.
    Ответ написан
    Комментировать
  • Как ширину элемента сделать с зависимостью от размеров элементов внутри него?

    dimovich85
    @dimovich85 Куратор тега CSS
    https://u-academy.net/
    Если родителю задать display: flex, то все элементы -потомки будут иметь ширину по контенту, и встанут в ряд. Если надо чтобы они выстроились вертикально, то родителю еще добавить стоит flex-direction: column;
    UPD: prntscr.com/hrcg70
    Добавить элементу display: table-cell; :)
    Ответ написан
    Комментировать
  • Изменение содержимого тега DIV?

    dimovich85
    @dimovich85 Куратор тега JavaScript
    https://u-academy.net/
    var div = document.querySelector('.selector');
    div.innerHTML = 'New content';
    Ответ написан
    Комментировать
  • Как вызывать функцию при ресайзе окна по одному разу при одном условии?

    dimovich85
    @dimovich85 Куратор тега JavaScript
    https://u-academy.net/
    $(function(){
    let timer;
    let anyTime = 300; // любое время
    $(window).on('resize', () => {
    if (timer !== undefined){
    clearTimeout(timer);
    }
    else{
    timer = setTimeout(() =>{
    // все, что надо сделать после ресайза, тут всякие проверки и так далее можно
    }, anyTime);
    }
    });

    Суть кода такая, что создаем переменную пустую, когда происходит ресайз окна - ставится таймаут на действие, которое будет выводить сообщение, каждый пиксель будет вызывать функцию, которая обрабатывает ресайз, и внутри функции - проверка, что если таймер уже задан, то его надо обнулить. Это дает нам то, что пока ресайз окна не завершится, никаких сообщений не увидим, а как только ресайз закончится, то отработает самый последний таймаут и после окончания ресайза, через anyTime, например 300мс, увидим сообщение. Таймаут можно ставить любой, просто 300мс не заметит человек, но будет достаточно, чтобы отследить окончание ресайза. Внутри функции в таймауте можно писать любые проверки и код. Такое "отложенное действие" можно запустить после прохождения 800пкс, добавить внутрь обработчика ресайза проверку на ширину окна.
    Ответ написан
  • Как сделать данный эффект?

    dimovich85
    @dimovich85 Куратор тега CSS
    https://u-academy.net/
    Посмотреть код с помощью Ctrl+U, почитать исходники=) Я пока кратко глянул, но каждая буква - отдельный блок...
    Ответ написан
  • Где найти круговой слайдер?

    dimovich85
    @dimovich85 Куратор тега JavaScript
    https://u-academy.net/
    https://www.dropbox.com/s/y1azni4d3axmuk8/3DGaller...
    Вот, скачай и посмотри, кажись он.
    Ответ написан
    Комментировать
  • Почему может не всегда срабатывать клик?

    dimovich85
    @dimovich85 Куратор тега JavaScript
    https://u-academy.net/
    https://developer.mozilla.org/ru/docs/Web/API/Mous... - вот тут есть перевод на русский, можно сделать на объекте прослушку клика (@click="onSomeClick($event)") и передать ивент в обработчик, далее смотрим e.button, switch ... case(1), то есть средняя кнопка мыши, и запускаем какой-нибудь метод this.onClick().
    Ответ написан
    Комментировать