Задать вопрос
Ответы пользователя по тегу JavaScript
  • Как устранить затухание popup при клике на него?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Вызывайте fadeOut только после того, как убедитесь, что кликнут был кто надо:

    overlay.click(e => {
      if (e.target === e.delegateTarget) {
        overlay.fadeOut();
      }
    });
    
    // или
    
    overlay.click(function(e) {
      $(this).filter(e.target).fadeOut();
    });

    Или останавливайте всплытие кликов на вложенных элементах:

    overlay
      .click(() => overlay.fadeOut())
      .children()
      .click(e => e.stopPropagation());
    Ответ написан
    1 комментарий
  • Как запустить цикл each для каждого ключа json?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $.each($.parseJSON(response), (k, v) => $(`.${k}`).text(v));

    или

    for (const [ k, v ] of Object.entries(JSON.parse(response))) {
      document.querySelector(`.${k}`).innerText = v;
    }
    Ответ написан
    1 комментарий
  • Как отсортировать массив в обратном порядке?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Ничего сортировать не надо. И обратный порядок не нужен. Вставляем сразу всё:

    document.querySelector('.listing').after(...arrayWords.map(n => {
      const p = document.createElement('p');
      p.innerHTML = n;
      return p;
    }));
    
    // или
    
    document.querySelector('.listing').insertAdjacentHTML(
      'afterend',
      arrayWords.map(n => `<p>${n}</p>`).join('')
    );

    А если не сразу всё, то всё равно обратная сортировка не нужна:

    arrayWords.reduce((prev, n) => (
      prev.after(document.createElement('p')),
      prev.nextSibling.innerHTML = n,
      prev.nextSibling
    ), document.querySelector('.listing'));
    Ответ написан
    Комментировать
  • Как сделать, чтобы выбранное значение в списке заменяло собой список?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('table').on('change', 'select', ({ target: t }) => {
    
      $(t).replaceWith(t.value);
    
      // или
    
      $(t).parent().text(t.value);
    });

    или

    document.querySelector('table').addEventListener('change', ({ target: t }) => {
    
      if (t.tagName === 'SELECT') {
        t.replaceWith(t.value);
      }
    
      // или
    
      if (t instanceof HTMLSelectElement) {
        t.parentNode.textContent = t.value;
      }
    
      // или
    
      if (t.nodeName === 'SELECT') {
        t.parentNode.replaceChild(new Text(t.value), t);
      }
    
      // или
    
      t.matches('select') && (t.outerHTML = t.value);
    });
    Ответ написан
    Комментировать
  • Как более компактно получить тексты ошибок и выводить цвета?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Цвета:

    progress.css('background-color', [
      { min: 100, color: '#47C965' },
      { min:  40, color: '#f5dd30' },
      { min:   0, color: '#bf4542' },
    ].find(n => n.min <= strength).color);

    Тексты ошибок: не надо никаких атрибутов, сразу положите их в объекты.
    Но если всё же хотите идти путём говнокодера, то
    const tests = [ здесь перечисляете регулярные выражения ].map((n, i) => ({
      regex: n,
      message: error_wrap.attr(`data-error_${i + 1}`),
    }));
    Ответ написан
    1 комментарий
  • Как найти дубликаты в массиве?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Собрать новый массив:

    const newArr = Object
      .values(arr.reduce((acc, n, i) => ((acc[n] ??= []).push(i), acc), {}))
      .reduce((acc, n) => (n.forEach(i => acc[i] = n.length > 1), acc), []);
    
    // или
    
    const newArr = arr.map(function(n) {
      return this[n];
    }, arr.reduce((acc, n) => (acc[n] = acc.hasOwnProperty(n), acc), {}));
    
    // или
    
    const count = arr.reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {});
    const newArr = arr.map(n => count[n] > 1);
    
    // или
    
    const newArr = arr.map((n, i, a) => a.indexOf(n) !== a.lastIndexOf(n));

    Обновить существующий:

    arr.forEach(function(n, i, a) {
      a[i] = this.get(n) > 1;
    }, arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map));
    
    // или
    
    const duplicates = arr.reduce((acc, n) => acc.set(n, acc.has(n)), new Map);
    arr.splice(0, arr.length, ...arr.map(n => duplicates.get(n)));
    Ответ написан
    2 комментария
  • Как получить текст выбранного option'а?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Поскольку в показанном select'е у option'ов отсутствуют атрибуты value, то их значениями будет их текстовое содержимое. Так что в данном конкретном случае текст можно получить с помощью метода val.

    Ну а вообще:

    $('select').change(function() {
      const text = $(':checked', this).text();
      console.log(text);
    });

    Или, к чёрту jquery:

    document.querySelector('select').addEventListener('change', function(e) {
      const select = this;
      // или
      // const select = e.target;
      // const select = e.currentTarget;
    
      const [ option ] = select.selectedOptions;
      // или
      // const option = select[select.selectedIndex];
      // const option = select.querySelector(':checked');
      // const option = [...select.options].find(n => n.selected);
    
      const text = option.text;
      // или
      // const text = option.textContent;
      // const text = option.innerText;
    
      console.log(text);
    });
    Ответ написан
    Комментировать
  • Как сделать фильтрацию результатов по поиску?

    0xD34F
    @0xD34F Куратор тега JavaScript
    document.querySelector('#filter-input').addEventListener('input', e => {
      const val = e.target.value.toLowerCase();
    
      container.querySelectorAll('.title').forEach(n => {
        n.closest('.card').style.display = n.innerText.includes(val)
          ? 'block'
          : 'none';
      });
    });
    Ответ написан
    1 комментарий
  • Как динамично сформировать объект?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const obj = Object.fromEntries(arr.map((n, i) => [ `answer${i + 1}`, n ]));

    или

    const obj = arr.reduce((acc, n, i) => (acc['answer' + ++i] = n, acc), {});

    или

    const obj = {};
    for (const [ i, n ] of arr.entries()) {
      obj['answer'.concat(-~i)] = n;
    }
    Ответ написан
    5 комментариев
  • Как проверить регистр первой буквы?

    0xD34F
    @0xD34F Куратор тега JavaScript
    str[0] === str[0].toUpperCase()

    или

    /^[A-Z]/.test(str)

    или

    (c => 64 < c && c < 91)(str.charCodeAt(0))

    или

    'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.includes(str.at(0))

    Но что если там вообще не буква?
    Если такое может быть, то...
    ...ни хрена тут больше не скажу, тщательнее надо было вопрос продумывать.
    Ответ написан
    Комментировать
  • Как поменять класс, если выбран checkbox?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('.filter').change(({ target: t }) => {
      $(`[name="${$(t).closest('.button').data('size')}"]`)
        .closest('.product-box')
        .toggleClass('hidden', !t.checked);
    }).find(':checked').change();

    Или, к чёрту jquery:

    const filter = document.querySelector('.filter');
    
    filter.addEventListener('change', ({ target: t }) => {
      const size = t.closest('.button').dataset.size;
      document.querySelectorAll(`[name="${size}"]`).forEach(n => {
        n.closest('.product-box').classList.toggle('hidden', !t.checked);
      });
    });
    
    filter.querySelectorAll(':checked').forEach(n => {
      n.dispatchEvent(new Event('change', { bubbles: true }));
    });
    Ответ написан
    1 комментарий
  • Как валидировать пароль?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Складываем в массив описания проверок, которым должен быть подвергнут пароль - это будут объекты, состоящие из функции, проверяющей соответствие пароля одному конкретному условию, и сообщения, демонстрируемого пользователю в случае, если проверка прошла неудачно.

    Добавляем элементу с паролем обработчик события input, в котором бежим по массиву проверок, передаём функциям текущий пароль, собираем в массив сообщения о допущенных пользователем ошибках.

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

    Ну и всё, дальше остаётся только вывести результаты.

    <div>
      <input id="password">
    </div>
    <div>
      <div>Сложность пароля: <span id="strength_percent">0</span>%</div>
      <progress id="strength_progress" max="100" value="0"></progress>
    </div>
    <div id="errors"></div>

    const validations = [
      {
        test: val => val.length >= 8,
        message: 'пароль должен содержать хотя бы 8 символов',
      },
      {
        test: val => /[A-ZА-ЯЁ]/.test(val),
        message: 'пароль должен содержать хотя бы 1 большую букву',
      },
      {
        test: val => /[a-zа-яё]/.test(val),
        message: 'пароль должен содержать хотя бы 1 маленькую букву',
      },
      {
        test: val => /[^\s\da-zа-яё]/i.test(val),
        message: 'пароль должен содержать хотя бы 1 специальный символ (не пробел, букву или цифру)',
      },
      {
        test: val => /\d/.test(val),
        message: 'пароль должен содержать хотя бы 1 цифру',
      },
    ];
    
    document.querySelector('#password').addEventListener('input', ({ target: { value } }) => {
      const errors = validations.reduce((acc, n) => (
        n.test(value) || acc.push(n.message),
        acc
      ), []);
    
      const strength = (validations.length - errors.length) / validations.length * 100;
    
      document.querySelector('#strength_progress').value = strength;
      document.querySelector('#strength_percent').innerText = strength | 0;
      document.querySelector('#errors').innerHTML = errors
        .map(n => `<p>${n}</p>`)
        .join('');
    });
    Ответ написан
    1 комментарий
  • Как добавить общую обёртку дочерним узлам?

    0xD34F
    @0xD34F Куратор тега JavaScript
    оборачивается не полностью

    Почему так: childNodes представляет собой динамическую коллекцию, т.е., при добавлении или удалении узлов она обновляется без каких-либо действий с вашей стороны. Поэтому, когда вы добавляете в wrapper нулевой узел, он тут же пропадает из item.childNodes, а у оставшихся узлов позиция уменьшается на единицу - тот, что был первым, становится нулевым, второй первым и так далее. Так что когда for...of переходит к следующему узлу, им оказывается не тот, что изначально имел индекс 1, а расположенный за ним. Бывший первый, а теперь нулевой, оказывается пропущен. Аналогичным образом будут пропущены и все последующие узлы, изначально имевшие нечётные индексы.

    Что тут можно сделать:

    Вариант раз - вместо перебора узлов всегда работать с тем, что имеет нулевой индекс:

    while (item.childNodes.length) {
      wrapper.appendChild(item.childNodes[0]);
    }

    Два - перебирать childNodes от конца к началу:

    for (let i = item.childNodes.length; i--;) {
      wrapper.prepend(item.childNodes[i]);
    }

    Три - перебирать не childNodes, а массив:

    for (const n of [...item.childNodes]) {
      wrapper.append(n);
    }

    А вообще, нет необходимости работать с каждым узлом индивидуально, метод append может принимать несколько параметров, так что переносим сразу всё:

    document.querySelectorAll('.www').forEach(n => {
      const wrapper = document.createElement('div');
      wrapper.classList.add('red');
      wrapper.append(...n.childNodes);
      n.append(wrapper);
    });

    Или, можно и вовсе узлы не трогать, если перезаписывать разметку:

    for (const n of document.getElementsByClassName('www')) {
      n.innerHTML = `<div class="red">${n.innerHTML}</div>`;
    }
    Ответ написан
    Комментировать
  • Как отсортировать массив DOM-элементов в зависимости от значений атрибута вложенных элементов?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const sorted = arr
      .map(n => [
        n,
        +new URLSearchParams(n.querySelector('a').href.split('?').pop()).get('value') || Infinity,
      ])
      .sort((a, b) => a[1] - b[1])
      .map(n => n[0]);

    UPD. А точно массив? Если всё-таки сортировать надо элементы внутри их родителя, то

    parentEl.append(...Array
      .from(parentEl.querySelectorAll('a'), n => [
        n.parentNode,
        Number(n.getAttribute('href').match(/(?<=value=)\d+/)) || Infinity,
      ])
      .sort((a, b) => a[1] - b[1])
      .map(n => n[0])
    );
    Ответ написан
    4 комментария
  • Как заменить шесть "function" на одну?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Сделать функцию, принимающую input, находящую соответствующий input'у span и обновляющую его содержимое:

    const updateValue = input =>
      input.previousElementSibling.querySelector('.p_value').innerText = input.value;

    У input'ов вырезать инлайновые обработчики, добавить общий класс, например: class="xxx".

    Дальше можно повесить делегированный обработчик, внутри которого проверять наличие этого класса:

    document.addEventListener('input', ({ target: t }) => {
      if (t.classList.contains('xxx')) {
        updateValue(t);
      }
    });

    Или назначить обработчик каждому input'у индивидуально:

    document.querySelectorAll('.xxx').forEach(function(n) {
      n.addEventListener('input', this);
    }, e => updateValue(e.target));
    Ответ написан
    4 комментария
  • Как задать класс элементам с одинаковыми порядковыми номерами?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const cols = document.querySelectorAll('.col');
    
    cols.forEach(n => {
      n.addEventListener('mouseover', onHover);
      n.addEventListener('mouseout', onHover);
    });
    
    function onHover(e) {
      const index = [...this.children].findIndex(n => n.contains(e.target));
      if (index !== -1) {
        const t = e.type === 'mouseover';
        cols.forEach(n => n.children[index].classList.toggle('hovered', t));
      }
    }
    Ответ написан
    Комментировать
  • Как можно отсортировать объект или map, чтобы после преобразовать в массив?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Не надо пытаться заниматься ерундой, сортируют массивы, а не объекты.

    Object
      .entries(arr.reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {}))
      .sort((a, b) => b[1] - a[1])
      .forEach(n => console.log(n.join(': ')));
    Ответ написан
    Комментировать
  • Как пронумеровать ссылки?

    0xD34F
    @0xD34F Куратор тега JavaScript
    document.querySelectorAll('.nav-about a').forEach((n, i) => n.attributes.href.value += i + 1);
    Ответ написан
    1 комментарий
  • Как в select выставить первое значение по событию?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('button').click(() => $('select').prop('selectedIndex', 0));

    или, к чёрту jquery:

    document.querySelector('button').addEventListener('click', () => {
      document.querySelectorAll('select').forEach(n => {
        // Какие тут есть варианты:
    
        // 1. Установить индекс выбранного option'а
        n.selectedIndex = 0;
    
        // 2. Установить select'у значение option'а, который должен быть выбран
        //    (чтобы заработало, надо будет добавить value="" option'ам)
        n.value = '';
    
        // 3. Назначить true свойству selected того option'а, на который надо переключиться
        n[0].selected = true;
        // или
        // n.options[0].selected = true;
        // n.children[0].selected = true;
        // n.firstElementChild.selected = true;
        // n.querySelector('option').selected = true;
      });
    });
    Ответ написан
    Комментировать
  • Как объединить массив массивов?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Массивы сложить в массив (const arrs = [ arr1, arr2 ];), дальше есть варианты:

    const result = arrs[0].map((_, i) => arrs.flatMap(arr => arr[i]));

    или

    const result = arrs.reduce((acc, arr) => (
      arr.forEach((n, i) => (acc[i] ??= []).push(...n)),
      acc
    ), []);

    или

    const result = [];
    
    for (const arr of arrs) {
      for (const [ i, n ] of arr.entries()) {
        if (!result[i]) {
          result[i] = [];
        }
    
        for (const m of n) {
          result[i][result[i].length] = m;
        }
      }
    }
    Ответ написан
    1 комментарий