• Добавление/удаление class при достижение верха окна браузера в модальном окне с position: fixed; overflow: scroll;?

    Seasle
    @Seasle Куратор тега JavaScript
    document.querySelector('.modal-chtML')?.addEventListener('scroll', (event) => {
      if (event.target.scrollTop >= scrollChange) {
        add_class_on_scroll();
      } else {
        remove_class_on_scroll();
      }
    });
    Ответ написан
    Комментировать
  • Как удалить все атрибуты type='text/javascript' и type="text/css" на Вордпресс?

    add_action( 'template_redirect', function(){
        ob_start( function( $buffer ){
            $buffer = str_replace( array( 'type="text/javascript"', "type='text/javascript'" ), '', $buffer );
            $buffer = str_replace( array( 'type="text/css"', "type='text/css'" ), '', $buffer );
            return $buffer;
        });
    });
    Ответ написан
    2 комментария
  • Добавление/удаление класса по клику input?

    @historydev Куратор тега JavaScript
    Острая аллергия на анимешников
    document.querySelectorAll("input[type=radio]").forEach(input => {
      const oops = document.querySelector(".oops");
      input.onclick = () => {
        if(input.id.includes("1")) {
          oops.classList.add("hide");
          return
        } 
        oops.classList.remove("hide");
      }
    });
    Ответ написан
    Комментировать
  • Как удалить все классы, начинающиеся с определённой подстроки?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Получить массив с именами классов,
    отфильтровать начинающиеся на искомую подстроку,
    удалить только их:
    через 3 секунды удалятся классы, начинающиеся на "habr--"
    Ответ написан
    Комментировать
  • Как удалить все классы, начинающиеся с определённой подстроки?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Array.from(el.classList).forEach(n => el.classList.toggle(n, !!n.indexOf('modal--')));

    или

    el.classList.remove(...[...el.classList].filter(n => n.startsWith('modal--')));

    или

    for (let i = el.classList.length; i--; ) {
      if (el.classList[i].search('modal--') === 0) {
        el.classList.remove(el.classList[i]);
      }
    }

    или

    el.className = el.className.split(' ').filter(n => !/^modal--/.test(n)).join(' ');

    или

    el.className = el.className.replace(/(^| )modal--\S*/g, '').trim();
    Ответ написан
    9 комментариев
  • Как сделать чтобы при нажатии на кнопку открывался только один элемент, а не все?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Сразу определим селекторы элементов и класс, они нам дальше понадобятся:

    const blockSelector = 'селектор блоков';
    const buttonSelector = 'селектор кнопок';
    const activeClass = 'класс, показывающий блок';

    Класс надо переключать не у всех блоков сразу, а у того, который соответствует нажатой кнопке. Как определить, какой блок нужен? Можно просто по индексу. Нажали третью кнопку - нужен третий блок. Как узнать индекс кнопки? Например, он передаётся в коллбек метода forEach. Т.е., в список параметров внешнего forEach добавляем индекс, и вместо внутреннего forEach выполняем обращение к соответствующему элементу коллекции блоков:

    const blocks = document.querySelectorAll(blockSelector);
    const buttons = document.querySelectorAll(buttonSelector);
    
    buttons.forEach((n, i) => {
      n.addEventListener('click', () => {
        blocks[i].classList.toggle(activeClass);
      });
    });

    Кстати, создавать отдельные обработчики клика для каждой из кнопок не обязательно, можно сделать один общий. Как при этом получать индексы? - их можно прицепить прямо к кнопкам. Например, в виде data-атрибута:

    const onClick = function({ currentTarget: { dataset: { index } } }) {
      this[index].classList.toggle(activeClass);
    }.bind(document.querySelectorAll(blockSelector));
    
    document.querySelectorAll(buttonSelector).forEach((n, i) => {
      n.dataset.index = i;
      n.addEventListener('click', onClick);
    });

    Также есть вариант вычислять индекс при клике:

    const blocks = document.querySelectorAll(blockSelector);
    const buttons = document.querySelectorAll(buttonSelector);
    
    buttons.forEach(n => n.addEventListener('click', onClick));
    
    function onClick() {
      const index = Array.prototype.indexOf.call(buttons, this);
      blocks[index].classList.toggle(activeClass);
    }

    А вообще, если у каждой из пар кнопка-блок есть отдельный общий предок (const containerSelector = '...';), то индексы не нужны. Достаточно от нажатой кнопки подняться до общего предка кнопки и блока, и найти внутри блок (а можно даже и не искать, если добавлять класс контейнеру; конечно, стили придётся в этом случае немного изменить, вместо .блок.класс будет .контейнер.класс .блок):

    const toggleBlock = button => button
      ?.closest(containerSelector)
      ?.querySelector(blockSelector)
      .classList
      .toggle(activeClass);
    
    
    // можно добавить обработчик клика каждой кнопке индивидуально
    document.querySelectorAll(buttonSelector).forEach(function(n) {
      n.addEventListener('click', this);
    }, e => toggleBlock(e.currentTarget));
    
    // или один раз на всю страницу
    document.addEventListener('click', e => {
      toggleBlock(e.target.closest(buttonSelector));
    });
    Ответ написан
    Комментировать
  • Упростить js скрипт?

    @garbagecollected
    // Пусть, список будет в строке разделенной вертикальной чертой
    "contacts|goods|gallery|reviews|screen".split`|`
    // Находим каждый элемент
    .map(data=>document.querySelector(`.blocks__item[data-item="${data}"]`))
    // Вешаем на элементы событие mouseenter
    .forEach(el=>el.addEventListener('mouseenter',e=>{
      // Класс активного элемента надо удалить только у активного элемента
      document.querySelector`.blocks__item.blocks__item--active`.classList.remove`blocks__item--active`;
      // А элементу, вызвавшему это событие надо добавить класс активности
      e.target.classList.add`blocks__item--active`;
      // Еще где-то какому-то элементу присвоим класс, частично формирующийся из атрибута элемента события 
      document.querySelector`.blocks__phone-bg`.className = `blocks__phone-bg blocks__phone-bg--${e.target.getAttribute`data-item`}`;
    });
    // Вот и все!
    Ответ написан
  • Упростить js скрипт?

    ProgrammerForever
    @ProgrammerForever
    Учитель, автоэлектрик, программист, музыкант
    Отделите данные от скрипта, будет компактнее. Да и много повторений
    const tags = ['screen', 'goods', 'gallery', 'reviews', 'contacts'];
    function enableBlock(blockTag) {
        document.querySelector('.blocks__phone-bg').classList.add(`blocks__phone-bg--${blockTag}`);
        document.querySelector('.blocks__phone-bg').className = `blocks__phone-bg blocks__phone-bg--${blockTag}`;
        tags.forEach(tag=>{
          let elem = document.querySelector(`.blocks__item[data-item="${tag}"]`);
          if (!elem){
             return;
          };
          if (blockTag===tag){
            elem.classList.add('blocks__item--active');
          }else{
            elem.className = 'blocks__item';
          };
        });
    }
    Ответ написан
    4 комментария
  • Заменить символ в DOM?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    нужно рекурсивно обойти дерево DOM по узлам Node:
    берём корневой узел и перебираем его дочерние узлы childNodes.
    Интересуют только текстовые: где node.nodeType === Node.TEXT_NODE
    в каждом с содержанием node.nodeValue работать как со строкой текста – заменить/убрать искомый символ.

    Если же попался не-текстовый узел, то рекурсия! – перебирать таким же образом его childNodes

    Ответ написан
    Комментировать
  • Одно видео в разных местах на странице?

    Keylei
    @Keylei
    Посмотрите тут. Возможно поможет
    Ответ написан
    Комментировать
  • Svg по ширине дива?

    @cssfish
    Плохое знание основ - причина больших бед
    если к атрибутам svg доступа нет то можно так:

    .qr-code svg {
      display: block;
      transform: scale(calc(400 / 1080));
      transform-origin: 0 0;
    }


    p.s.
    ну и overflow: hidden; для .qr-code
    Ответ написан
    Комментировать
  • Отложить загрузку плагина WP?

    artzolin
    @artzolin Куратор тега WordPress
    php, WordPress разработка сайтов artzolin.ru
    PHP собирает HTML и отдает его браузеру клиента. Задерживать работу PHP нет никакого смысла, у клиента просто будет позже открываться сайт. У вас есть три варианта:

    • вынести парсер на сторону клиента
    • делать ajax-запрос на сервер
    • сохранять данные парсера в json/html и обновлять по условию
    Ответ написан
    Комментировать
  • Подключение штатного jquery на определенных страницах?

    @KingAnton
    Можете воспользоваться Conditional Tags вукомерса, но погоня за зеленой зоной в page speed insight занятие бесперспективное
    https://woocommerce.com/document/conditional-tags/
    Ответ написан
    1 комментарий
  • Woocommerce вывести кнопку добавить в корзину в нужном месте шаблона?

    @Gamelot
    Программист php
    Можно воспользоваться функцией woocommerce_template_single_add_to_cart(). Она использует глобальную переменную $product внутри себя. При этом также вылезет input с кол-вом заказываемого товара. Его можно скрыть на css. Для простого товара работает точно. Для других типов не проверял.

    <?php
    woocommerce_template_single_add_to_cart();
    ?>
    Ответ написан
    Комментировать
  • Woocommerce вывести кнопку добавить в корзину в нужном месте шаблона?

    AntonLitvinenko
    @AntonLitvinenko
    HTML coder
    Как то так но я не проверял
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
    
    if ( ! function_exists( 'single_add_to_cart_wrapper_start' ) ) {
      function single_add_to_cart_wrapper_start() {
        ?>
          <div class="product_footer">
        <?php
      }
    }
    
    if ( ! function_exists( 'single_add_to_cart_wrapper_end' ) ) {
      function single_add_to_cart_wrapper_end() {
        ?>
          </div>
        <?php
      }
    }
    add_action( 'woocommerce_after_single_product_summary', 'single_add_to_cart_wrapper_start', 1 );
    add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_single_add_to_cart', 3 );
    add_action( 'woocommerce_after_single_product_summary', 'single_add_to_cart_wrapper_end', 5 );

    на базе второго ответа вот готовый код, менее многословный
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
    
    if ( ! function_exists( 'single_add_to_cart_in_footer' ) ) {
      function single_add_to_cart_in_footer() {
        ?>
          <div class="product_footer">
            <?php woocommerce_template_single_add_to_cart(); ?>
           </div>
        <?php
      }
    }
    
    add_action( 'woocommerce_after_single_product_summary', 'single_add_to_cart_in_footer', 5 );
    Ответ написан
    4 комментария
  • Получить полный URL до папки?

    Fernus
    @Fernus
    Техник - Механик :)
    <?php
    
    $url = 'https://site.ru/folder/dex/index.php';
    
    $url_dirname = dirname($url);
    
    print_r($url_dirname); // https://site.ru/folder/dex
    Ответ написан
    4 комментария
  • Если в диве больше 1го элемента то добавить класс к диву?

    document.querySelectorAll('.full').forEach(f => {
      if(f.children.length > 1) {
        f.classList.add('blue')
      }
    })
    Ответ написан
    Комментировать
  • Если в диве больше 1го элемента то добавить класс к диву?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Кому надо добавить класс, какой класс, сколько вложенных элементов должно быть:

    const selector = 'селектор элементов';
    const className = 'класс';
    const minChildrenCount = 666;

    Добавляем:

    for (const n of document.querySelectorAll(selector)) {
      n.classList.toggle(className, n.children.length >= minChildrenCount);
    }
    
    // или (нет, так делать точно не надо - для 0 результат будет некорректным)
    
    document
      .querySelectorAll(`${selector} > :nth-child(${minChildrenCount})`)
      .forEach(n => n.parentNode.classList.add(className));
    Ответ написан
    Комментировать
  • Несколько условий в if?

    wapster92
    @wapster92 Куратор тега JavaScript
    Не делай сложные условия, лучше разбей на несколько и комбинируй их. Простенький пример
    const simpleString = '7911xxxxxxx';
    
    const validateStr = (str) => {
      let result = '';
      if (typeof str !== 'string') throw 'Parameter is not a string!';
      if (str.length >= 10) throw 'Phone is incorrect!';
      if (str[0] === '7') result = '+' + str;
      return str;
    }
    Ответ написан
    Комментировать