Задать вопрос
ValeriuCutebov

Valeriu Cuțebov

Ответы пользователя по тегу JavaScript

  • Как присвоить стиль через JS?

    ValeriuCutebov
    @ValeriuCutebov
    Проблема заключается в том, что скрипт выполняется раньше, чем элементы страницы загружены и доступны для манипуляций. Попробуйте обернуть ваш скрипт в обработчик события DOMContentLoaded, чтобы выполнение скрипта началось только после полной загрузки документа:

    document.addEventListener('DOMContentLoaded', function() {
  var divContent = document.querySelector('.crm-kanban-item-repeated').closest('.crm-kanban-item')
  var StyleContents = divContent.style.background = '#000'
  console.log(StyleContents)
});

    Также убедитесь, что элемент с классом crm-kanban-item-repeated существует на странице в момент выполнения скрипта, иначе querySelector вернет null.
    Ответ написан
    Комментировать
    Комментировать

  • Как добавить/удалить class после прокрутки?

    ValeriuCutebov
    @ValeriuCutebov
    Привет! Для добавления класса scroll-up при прокрутке вверх можно сохранять предыдущее значение scrollTop и сравнивать его с текущим значением при каждом событии прокрутки. Если текущее значение меньше предыдущего, то добавляем класс scroll-up, иначе удаляем его. Для удаления класса scroll-up при достижении header__section-info можно получить координаты этого элемента и удалить класс, если текущее значение scrollTop больше или равно его координатам.

    Вот пример кода:
    document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  var prevScrollpos = window.pageYOffset;
  var sectionInfo = document.querySelector('.header__section-info').getBoundingClientRect().top + window.pageYOffset;
  var headerOneELement = document.querySelector('.header__section-navbar');

  window.addEventListener('scroll', function () {
    var currentScrollpos = window.pageYOffset;

    // fixedHeader on scroll
    function fixedHeader() {
      if (currentScrollpos > sectionInfo) {
        headerOneELement.classList.add('fix');
        headerOneELement.classList.add('scroll-up');
        document.querySelector('.header').style.marginBottom = headerOneELement.offsetHeight + 'px';

        if (currentScrollpos < prevScrollpos) {
          headerOneELement.classList.remove('scroll-up');
        }
      } else {
        headerOneELement.classList.remove('fix');
        headerOneELement.classList.remove('scroll-up');
        document.querySelector('.header').style.marginBottom = '0';
      }
      prevScrollpos = currentScrollpos;
    }

    fixedHeader();
  });
});

    Обрати внимание, что я сохраняю координаты header__section-info в переменной sectionInfo с учетом текущего значения scrollTop. Я также инициализирую переменную prevScrollpos вне функции обработчика события прокрутки, чтобы она была доступна внутри обработчика и сохраняла значение scrollTop предыдущего события.
    Ответ написан
    8 комментариев
    8 комментариев

  • Скрипт работает не так javascript, можно ли что то с эти сделать?

    ValeriuCutebov
    @ValeriuCutebov
    Для того, чтобы скрипт работал не только один раз, вам нужно добавить функцию, которая будет удалять все созданные элементы после их анимации. Для этого вы можете использовать метод .empty() или .remove() для удаления всех созданных элементов.

    Вот как может выглядеть обновленный код:
    <script>
    let id;
    let j = 1;

    $('.main-i').hover(function() {
        let a = $('.main-i').offset();
        for (let i = 1; i <= 9; i++) {
            $('.pc-spans').append('<span data-class="span-i" data-id=' + i + ' class="i-am-os">text</span>');
            $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top + i * 13, left: a.left + i ** 2 });
        }
        $('.pc-spans').append('<span data-class="span-i" data-id=' + 10 + ' class="i-am-os">text</span>');
        $('.i-am-os[data-id="' + 10 + '"]').offset({ top: a.top + 10 * 13, left: a.left + 50 + 10 ** 2 });
        for (let i = 11; i <= 22; i++) {
            $('.pc-spans').append('<span data-class="span-i" data-id=' + i + ' class="i-am-os">text</span>');
            $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top - (i - 20) * 13, left: a.left - (i - 22) ** 2 + 360 });
        }
    }, function() {
        id = setInterval(function() {
            $('.i-am-os[data-id="' + j + '"]').animate({
                opacity: '0',
                color: '#00000000'
            }, 100, function() {
                $(this).remove();
            });
            if (j > 22) {
                clearInterval(id);
                $('.pc-spans').empty(); // Remove all elements created on hover
            } else {
                j++;
            }
        }, 100);
    });

</script>

    Также я заметил опечатку в анимации - в свойстве color вы написали olor, я исправил это в обновленном коде.
    Ответ написан
    3 комментария
    3 комментария