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

    0xD34F
    @0xD34F Куратор тега JavaScript
    function filter(obj, key, f) {
      const keys = Object.keys(obj);
    
      return (obj[key] || []).reduce((acc, n, i) => (
        f(n) && keys.forEach(k => acc[k].push(obj[k][i])),
        acc
      ), keys.reduce((acc, k) => (acc[k] = [], acc), {}));
    }
    
    
    const result = filter(obj, 'years', n => 2012 <= n && n <= 2014);

    или

    function filter(obj, f) {
      const keys = Object.keys(obj);
      const length = keys.length && obj[keys[0]].length;
      const result = Object.fromEntries(keys.map(k => [ k, [] ]));
    
      for (let i = 0; i < length; i++) {
        if (f(i, obj)) {
          keys.forEach(k => result[k].push(obj[k][i]));
        }
      }
    
      return result;
    }
    
    
    const result = filter(obj, (i, { years: { [i]: n } }) => 2012 <= n && n <= 2014);
    Ответ написан
    1 комментарий
  • Как закрыть 2 одинаковых попапа?

    0xD34F
    @0xD34F Куратор тега JavaScript
    - .dropdown__block.open {
    + .dropdown.open .dropdown__block {

    const containerSelector = '.dropdown';
    const buttonSelector = `${containerSelector} .dropdown__toggler`;
    const activeClass = 'open';
    
    
    // jquery, как вы и хотели
    $(document).on('click', ({ target: t }) => {
      const $container = $(t).closest(containerSelector);
      const $button = $(t).closest(buttonSelector);
    
      if ($button.length) {
        $container.toggleClass(activeClass);
      }
    
      $(containerSelector).not($container).removeClass(activeClass);
    });
    
    // или, к чёрту jquery
    document.addEventListener('click', ({ target: t }) => {
      const container = t.closest(containerSelector);
      const button = t.closest(buttonSelector);
    
      if (button) {
        container.classList.toggle(activeClass);
      }
    
      document.querySelectorAll(containerSelector).forEach(n => {
        if (n !== container) {
          n.classList.remove(activeClass);
        }
      });
    });
    Ответ написан
    3 комментария
  • Как скрыть элементы между элементами с определённым классом?

    0xD34F
    @0xD34F Куратор тега JavaScript
    .hidden {
      display: none;
    }

    const itemSelector = '.item-service';
    const className = 'hidden';
    
    function toggleUntilNextItem(el) {
      while ((el = el.nextElementSibling) && !el.matches(itemSelector)) {
        el.classList.toggle(className);
      }
    }

    document.querySelectorAll(itemSelector).forEach(function(n) {
      n.addEventListener('click', this);
    }, e => toggleUntilNextItem(e.currentTarget));
    
    // или
    
    document.addEventListener('click', e => {
      const item = e.target.closest(itemSelector);
      if (item) {
        toggleUntilNextItem(item);
      }
    });
    Ответ написан
    1 комментарий
  • Как взять values из объекта?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Object.entries(obj).filter(n => Number.isInteger(+n[0])).map(n => n[1]).join(';')
    
    // или
    
    Object.keys(obj).reduce((acc, n) => (`${+n}` === n && acc.push(obj[n]), acc), []).join(';')
    
    // или
    
    Array.from(obj).join(';')
    
    // или
    
    JSON.stringify(obj).match(/(?<="\d+":").*?(?=")/g).join(';')
    Ответ написан
    Комментировать
  • Как поменять src картинки с помощью скрипта?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('.links').on('mouseover', 'a', function() {
      $(this).closest('.block').find('img').attr('src', $(this).data('src'));
    });

    или

    document.addEventListener('mouseover', ({ target: t }) => {
      const { src } = t.dataset;
      if (src) {
        t.closest('.block').querySelector('img').src = src;
      }
    });

    или

    document.querySelectorAll('[data-src]').forEach(function(n) {
      n.addEventListener('mouseenter', this);
    }, ({ target: t }) => t
      .parentNode
      .parentNode
      .nextElementSibling
      .setAttribute('src', t.getAttribute('data-src'))
    );
    Ответ написан
    2 комментария
  • Как связать элементы с помощью data-атрибута?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('.open-category').click(function() {
      $(`.d-none[data-id="${this.dataset.id}"]`).toggleClass('active');
    });

    или

    for (const n of document.getElementsByClassName('open-category')) {
      n.addEventListener('click', onClick);
    }
    
    function onClick({ target: { dataset: { id } } }) {
      document.querySelector(`.d-none[data-id="${id}"]`).classList.toggle('active');
    }

    или

    const elements = new Map(Array.from(
      document.querySelectorAll('.open-category'),
      n => [ n, document.querySelector(`.d-none[data-id="${n.dataset.id}"]`) ]
    ));
    
    document.addEventListener('click', e => {
      elements.get(e.target)?.classList.toggle('active');
    });
    Ответ написан
    6 комментариев
  • Как удалить элементы массива внутри цикла JS?

    0xD34F
    @0xD34F Куратор тега JavaScript
    идет смещение индексов, но как это обойти, уже не знаю

    Можно перебирать массив индексов с конца:

    for (let i = arr.length; i--;) {
      invItems.splice(arr[i], 1);
    }

    Или развернуть его:

    for (const n of [...arr].reverse()) {
      invItems.splice(n, 1);
    }

    Или исправлять индексы - вычитать из них количество уже удалённых элементов, это будет индекс индекса:

    for (const [ i, n ] of arr.entries()) {
      invItems.splice(n - i, 1);
    }

    Или, есть вариант ограничить применение метода splice единственным вызовом - сначала собираем подходящие элементы, а затем полностью заменяем ими содержимое массива с данными (применимо и в том случае, если массив индексов не отсортирован):

    invItems.splice(0, invItems.length, ...invItems.filter((n, i) => !arr.includes(i)));

    Или, долой splice, будем использовать два счётчика - один для массива данных, другой для массива индексов. Второй одновременно будет счётчиком удаляемых элементов. Перебираем массив данных, копируем элементы влево на столько позиций, сколько в данный момент элементов должно быть удалено, увеличиваем счётчик удалённых элементов если текущий индекс массива с данными равен текущему элементу массива индексов, после обхода массива с данными удаляем посчитанное количество элементов с конца:

    let numDeleted = 0;
    
    for (let i = 0; i < invItems.length; i++) {
      invItems[i - numDeleted] = invItems[i];
      numDeleted += i === arr[numDeleted];
    }
    
    invItems.length -= numDeleted;
    Ответ написан
    1 комментарий
  • Как сделать рекурсивный последовательный async-await?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Последовательно:

    async function fetchRecursive(arr) {
      const result = [];
    
      if (Array.isArray(arr)) {
        for (const n of arr) {
          try {
            result.push({ status: true, result: await fetch(n.url).then(r => r.json()) });
          } catch(error) {
            result.push({ status: false, error });
          }
    
          result.push(...await fetchRecursive(n.children));
        }
      }
    
      return result;
    }

    Параллельно:

    const flat = arr => (arr || []).flatMap(n => [ n.url, ...flat(n.children) ]);
    
    const fetchRecursive = arr => Promise.allSettled(flat(arr).map(n => fetch(n).then(r => r.json())));
    Ответ написан
    1 комментарий
  • Как идентифицировать каждый блок в jQuery?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Уберите уникальные id, добавьте общие классы.
    Если id нужен, положите его в data-атрибут корневого элемента комментария.
    Уберите атрибут style, его содержимое разместите в стилях класса соответствующего элемента.
    Вместо переключения двух классов у разных элементов переключайте один - у корневого элемента комментария.

    <div class="comment" data-id="187">
      <a class="comment-edit">Редактировать</a>
      <span class="comment-panel"></span>
    </div>

    .comment .comment-panel {
      display: none;
    }
    
    .comment.editing .comment-panel {
      display: inline;
    }
    
    .comment.editing .comment-edit {
      color: red;
    }

    const containerSelector = '.comment';
    const buttonSelector = '.comment-edit';
    const activeClass = 'editing';
    
    
    // вот вам ваш jquery
    $(containerSelector).on('click', buttonSelector, e => {
      const id = $(e.delegateTarget).toggleClass(activeClass).data('id');
      console.log(id);
    });
    
    // или, к чёрту jquery
    document
      .querySelectorAll(`${containerSelector} ${buttonSelector}`)
      .forEach(n => n.addEventListener('click', onClick));
    
    function onClick() {
      const container = this.closest(containerSelector);
      container.classList.toggle(activeClass);
      const { id } = container.dataset;
      console.log(id);
    }
    Ответ написан
    9 комментариев
  • Как вывести атрибут?

    0xD34F
    @0xD34F Куратор тега JavaScript
    document.querySelectorAll('.class-1').forEach(n => {
      n.insertAdjacentHTML('afterbegin', `<div>${n.querySelector('span').dataset.name}</div>`);
    });

    или

    $('.class-1').prepend(function() {
      return $('<div>').text($('span', this).data('name'));
    });
    Ответ написан
    1 комментарий
  • Как создать динамически маркеры на Google Maps API из массива после обработки GeoCoder?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Объявление функции codeAddress - уберите цикл; в саму функцию передавайте адрес в качестве параметра:

    function codeAddress(address, geocoder, map) {
      geocoder.geocode({ address }, function(results, status) {
        if (status === 'OK') {
          new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
          });
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }

    В initMap перебирайте массив адресов, для каждого вызывайте codeAddress:

    address.forEach(n => codeAddress(n, geocoder, map));
    Ответ написан
    4 комментария
  • Как добавить элемент родителю?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Перед кем и что надо добавить:

    const elements = document.querySelectorAll('li > ul');
    const tag = 'span';
    const text = 'hello, world!!';

    Добавляем:

    elements.forEach(n => {
      n.before(document.createElement(tag));
      n.previousSibling.textContent = text;
    });

    или

    for (const n of elements) {
      const el = document.createElement(tag);
      el.innerText = text;
      n.parentNode.insertBefore(el, n);
    }

    или

    for (let i = 0; i < elements.length; i++) {
      elements[i].insertAdjacentHTML('beforebegin', `<${tag}>${text}</${tag}>`);
    }

    или

    (function insert(i, n = elements[i]) {
      if (n) {
        const el = document.createElement(tag);
        el.appendChild(new Text(text));
        n.insertAdjacentElement('beforebegin', el);
        insert(-~i);
      }
    })(0);
    Ответ написан
  • Как скрывать элементы при несовпадении data-атрибутов?

    0xD34F
    @0xD34F Куратор тега JavaScript
    $('.list-item').filter((i, n) => $(n).data('pagereview') !== $(n).data('pageslug')).hide();

    или

    $('[data-pageslug]').each(function() {
      const $this = $(this);
      $this.toggle($this.attr('data-pagereview') === $this.attr('data-pageslug'));
    });

    или

    document.querySelectorAll('.list-item').forEach(n => {
      n.hidden = n.getAttribute('data-pagereview') !== n.getAttribute('data-pageslug');
    });

    или

    for (const { style, dataset } of document.getElementsByClassName('list-item')) {
      if (dataset.pagereview !== dataset.pageslug) {
        style.display = 'none';
      }
    }

    или

    .hidden {
      display: none;
    }

    const items = document.querySelectorAll('[data-pageslug]');
    for (let i = 0; i < items.length; i++) {
      const { classList: c, attributes: a } = items[i];
      c.toggle('hidden', a['data-pagereview'].value !== a['data-pageslug'].value);
    }
    Ответ написан
    Комментировать
  • Как сделать так чтобы jquery фильтр искал по нескольким значениям?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Делаете общую функцию фильтрации, где получаете данные из всех фильтров и сравниваете их с элементами. Подключаете эту функцию ко всем фильтрам в качестве обработчика событий, возникающих при взаимодействии с ними пользователя. Например.
    Ответ написан
    1 комментарий
  • Как преобразовать данные?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const widgetsTransform = Object
      .values(widgets.reduce((acc, n) => ((acc[n.type] = acc[n.type] || []).push(n), acc), {}))
      .map(n => n.length > 1 ? ({ type: `Section${n[0].type}`, children: n }) : n[0]);
    Ответ написан
    Комментировать
  • Из-за чего тут ошибка с фильтрацией по цене?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Сравниваете строки вместо чисел. Скрываете элементы, но не показываете их.

    $('.price_min_max_btn').click(function() {
      const min = +$('.price_min').val() || 0;
      const max = +$('.price_max').val() || Infinity;
    
      $('.item_block_filter')
        .hide()
        .filter(function() {
          const price = +this.dataset.price;
          return min <= price && price <= max;
        })
        .show();
    });
    Ответ написан
    1 комментарий
  • Как получить позицию элемента относительно родителя?

    0xD34F
    @0xD34F Куратор тега JavaScript
    document.querySelector('table').addEventListener('click', e => {
      const td = e.target.closest('td');
      if (td) {
        const index = td.cellIndex;
        console.log(index);
      }
    });

    Это если как у вас, речь идёт о ячейках таблицы. В более общем случае можно делать так.
    Ответ написан
    Комментировать
  • Как реализовать рекурсивную генерацию объекта по строке?

    0xD34F
    @0xD34F Куратор тега JavaScript
    А почему строка? Могли бы и сами догадаться её в массив порезать:

    const arr = str.split('-');
    const end = 'final';

    Использовать рекурсию не нужно, перебираем массив от конца к началу, на каждом шаге создаём объект с единственным свойством, в качестве ключа используется текущий элемент, значение - объект, полученный на предыдущем шаге:

    const obj = arr.reduceRight((acc, n) => ({ [n]: acc }), end);

    Но, конечно, если очень хочется, то рекурсия возможна:

    const obj = (function createObj(arr, i, end) {
      return i < arr.length
        ? { [arr[i]]: createObj(arr, i + 1, end) }
        : end;
    })(arr, 0, end);
    Ответ написан
    1 комментарий
  • Как объединить массивы?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const result = graphData.map((n, i) => ({ ...n, color: palette[i % palette.length] }));

    или, в более общем виде:

    const combine = (arr, keys, values) =>
      arr.map(({ ...n }, i) => (
        values.forEach((m, j) => n[keys[j]] = m[i % m.length]),
        n
      ));
    
    
    const result = combine(graphData, [ 'color' ], [ palette ]);
    Ответ написан
    1 комментарий
  • Как найти и заменить несколько вхождений в тексте одним скриптом?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const replacements = [
      [ 'вот это надо заменить', 'вот на это' ],
      [ 'а это заменить', 'на вот это' ],
    ];
    
    $elements.html((i, html) => {
      return replacements.reduce((acc, n) => acc.replace(RegExp(n[0], 'g'), n[1]), html);
    });
    Ответ написан
    Комментировать