Задать вопрос
  • Как найти и удалить дубли leaflet?

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

    0xD34F
    @0xD34F Куратор тега JavaScript
    Элемент - представленный в примере - это FileInput (кликать нужно на него, что бы вызвать диалог выбора файлов)

    Нет, ничего у вас не получится. Этот диалог может быть открыт только в результате настоящих действий пользователя (и то не всех: клик, нажатие клавиши - окей; скролл, движение мыши, вызов контекстного меню - нет), а не их имитации. По крайней мере, в Хроме. В Фаерфоксе имитировать можно (UPD. Теперь тоже нельзя).
    Ответ написан
  • Как написать такое регулярное выражение?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Не нужны здесь регулярные выражения:

    const imgs = document.querySelectorAll('img[src*="/test/"]');

    UPD. Оказывается, автор вопроса с первого раза не сумел рассказать, чего ему надо. Вынесено из комментариев:

    это не в dom, а в строке

    Всё равно регулярные выражения не нужны. Парсим строку, ищем нужные элементы, получаем их разметку:

    const div = document.createElement('div');
    div.innerHTML = str;
    const imgsStr = ''.concat(...[].map.call(
      div.querySelectorAll('img[src*="/test/"]'),
      n => n.outerHTML
    ));

    или

    const imgsStr = Array
      .from(
        new DOMParser().parseFromString(str, 'text/html').querySelectorAll('img[src*="/test/"]'),
        n => n.outerHTML)
      .join('');

    или

    const imgsStr = Array.prototype.reduce.call(
      document.createRange().createContextualFragment(str).querySelectorAll('img[src*="/test/"]'),
      (acc, n) => acc + n.outerHTML,
      ''
    );

    UPD. Нет, со второго раза тоже не получилось. Всплыли ещё подробности:

    мне нужно удалить из этой строки все картинки, которые...

    Удалить, так удалить:

    const div = document.createElement('div');
    div.innerHTML = str;
    const imgs = div.querySelectorAll('img[src*="/test/"]');
    for (let i = 0; i < imgs.length; i++) {
      imgs[i].outerHTML = '';
    }
    str = div.innerHTML;

    или

    const { body } = new DOMParser().parseFromString(str, 'text/html');
    body.querySelectorAll('img[src*="/test/"]').forEach(n => n.remove());
    str = body.innerHTML;

    или

    const fragment = document.createRange().createContextualFragment(str);
    for (const n of fragment.querySelectorAll('img[src*="/test/"]')) {
      n.parentNode.removeChild(n);
    }
    str = Array.from(fragment.childNodes, n => n.outerHTML || n.nodeValue).join('');
    Ответ написан
    6 комментариев
  • Как достать информацию с иерархического уровня по клику?

    0xD34F
    @0xD34F Куратор тега React
    Как программно получить индексы Ряда и Ячейки для строки кода
    this.showPillarHandler(p.data[индекс Ряда].data[индекс Ячейки]) ?

    А не надо никаких индексов получать. Передавайте нужный объект в обработчик в самом нижнем компоненте вашей иерархии.

    В компоненте Pillars делаете так: showMachine={this.showPillarHandler}.
    В PillarListItem так: showShelfMachine={showMachine}.
    И в ShelfListItem аналогично: showPlaceMachine={showShelfMachine}.
    Наконец, в PlaceListItem: onClick={() => showPlaceMachine(seat)}.

    P.S. Погуглите, что такое redux.
    Ответ написан
  • Как создать массив с объектами из другого массива?

    0xD34F
    @0xD34F Куратор тега Vue.js
    computed: {
      groupedPosts() {
        return this.posts.reduce((acc, n) => {
          (acc[n.category] = acc[n.category] || []).push(n);
          return acc;
        }, {});
      },
    },

    UPD. Чего на самом деле хотел автор вопроса, вынесено из комментариев:

    При нажатии на название категории хочу выводить посты и соответствующего массива.

    Добавляем ещё одно вычисляемое свойство - массив категорий:

    categories() {
      return Object.keys(this.groupedPosts);
    },

    И обычное свойство - выбранная категория:

    data: () => ({
      activeCategory: null,
      ...

    На основе массива категорий создаём кнопки, по нажатию на которые будет производиться выбор категории:

    <button
      v-for="n in categories"
      v-text="n"
      :class="{ active: n === activeCategory }"
      @click="activeCategory = n"
    ></button>

    Если категория выбрана - показываем соответствующие посты:

    <div v-if="activeCategory">
      <div v-for="n in groupedPosts[activeCategory]" class="post">
        ...

    https://jsfiddle.net/yxf50qg2/
    Ответ написан
  • Что такое public?

    0xD34F
    @0xD34F
    Я тут начинаю изучать php с фреймворка yii2

    Что в переводе на русский означает "собираюсь стать говнокодером".

    Может лучше вы забудете про yii на ближайшие полгода и начнёте изучать php c собственно php? Чтобы вот таких вот дурацких вопросов не задавать. На него и ответить-то нормально нельзя - учитывая ваши нулевые знания php, это всё равно что объяснять тригонометрию человеку, который складывать-вычитать не научился.
    Ответ написан
    1 комментарий
  • Как определить принадлежность элемента по data value?

    0xD34F
    @0xD34F Куратор тега JavaScript
    function onlyOne({ value, dataset: { group } }) {
      document.querySelectorAll(`[data-group="${group}"]`).forEach(n => {
        n.checked = n.checked && n.value === value;
      });
    }
    Ответ написан
    2 комментария
  • Почему дублируется вывод массива?

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

    Замените

    todoList.forEach(function(element) {
      document.getElementById('out').innerHTML += '<p>'+element+'</p>';
    });

    на

    document.getElementById('out').innerHTML = todoList.map(n => `<p>${n}</p>`).join('');
    Ответ написан
    3 комментария
  • Как удалить определённые html теги из строки?

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

    const div = document.createElement('div');
    div.innerHTML = html;
    div.querySelectorAll('a[href*="/test/"]').forEach(n => n.outerHTML = '');
    html = div.innerHTML;

    или

    const { body } = new DOMParser().parseFromString(html, 'text/html');
    body.querySelectorAll('a[href*="/test/"]').forEach(n => n.remove());
    html = body.innerHTML;

    или

    const fragment = document.createRange().createContextualFragment(html);
    fragment.querySelectorAll('a[href*="/test/"]').forEach(n => n.parentNode.removeChild(n));
    html = Array.from(fragment.childNodes, n => n.outerHTML || n.nodeValue).join('');
    Ответ написан
    Комментировать
  • Как сортировать option по атрибуту?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Значения атрибутов - это строки. Надо при сравнении преобразовывать их в числа.

    UPD. Ну и в целом - многословно как-то у вас. Можно же гораздо короче:

    function sort(desc, attr) {
      const select = document.querySelector('#search-sort-field');
      select.append(...Array
        .from(select.children, n => [ n, n.getAttribute(attr) * (desc ? 1 : -1) ])
        .sort((a, b) => a[1] - b[1])
        .map(n => n[0])
      );
    }
    Ответ написан
    1 комментарий
  • Как сделать фон из точек на canvas'e?

    0xD34F
    @0xD34F
    В чём проблема открыть консоль и посмотреть как оно сделано? Можно даже утащить к себе.
    Ответ написан
    2 комментария
  • Как создать таблицу из массива?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Куда будем добавлять строки:

    const tbody = document.querySelector('#table tbody');
    
    // или
    
    const [ tbody ] = document.getElementById('table').tBodies;

    Добавляем:

    tbody.innerHTML = arr
      .map(n => `
        <tr>
          <td><a href="${n.link}">${n.city}</a></td>
          <td>${n.country}</td>
        </tr>`)
      .join('');

    или

    for (const n of arr) {
      const tr = tbody.insertRow();
      const a = document.createElement('a');
      a.href = n.link;
      a.text = n.city;
      tr.insertCell().append(a);
      tr.insertCell().textContent = n.country;
    }
    Ответ написан
    Комментировать
  • Добавить/удалить дочерний элемент по клику?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const dialog = new DOMParser().parseFromString(`
      <div id="add-note__quick">
        <i id="close">&times;</i>
        <input type="text" class="field" placeholder="Событие">
        <input type="text" class="field" placeholder="День, месяц, год">
        <input type="text" class="field" placeholder="Участники">
        <button>Создать</button>
      </div>
    `, 'text/html').body.querySelector('#add-note__quick');
    
    dialog.querySelector('#close').addEventListener('click', () => {
      dialog.parentNode.removeChild(dialog);
    });
    
    let selectedTd = null;
    
    document.querySelector('#calendar-body').addEventListener('click', ({ target }) => {
      if (target.tagName !== 'TH') {
        return;
      }
    
      if (selectedTd) {
        selectedTd.classList.remove('note');
      }
    
      if (selectedTd === target) {
        target.removeChild(dialog);
        selectedTd = null;
      } else {
        dialog.querySelectorAll('input').forEach(n => n.value = '');
        target.appendChild(dialog);
        target.classList.add('note');
        selectedTd = target;
      }
    });
    Ответ написан
    Комментировать
  • Как получить новый массив, который обьединен по условию в цикле: одинаковый price и user_id,при этом сложить все count?

    0xD34F
    @0xD34F
    $merged = [];
    foreach ($arr as $item) {
      $key = $item['id_user'].'/'.$item['price'];
      if (array_key_exists($key, $merged)) {
        $merged[$key]['count'] += $item['count'];
      } else {
        $merged[$key] = $item;
      }
    }
    $merged = array_values($merged);
    Ответ написан
    Комментировать
  • Ошибка в коде при переключении месяца в календаре?

    0xD34F
    @0xD34F Куратор тега JavaScript
    В консоле выдает Uncaught TypeError: next is not a function

    Вы обработчики подключили инлайново, а по умолчанию jsfiddle оборачивает код в window.onload - вот они и отсутствуют в глобальной области видимости. Назначайте обработчики с помощью addEventListener; или, в верхней части окна с js кодом есть выпадающее меню, открываете его, находите пункт "load type", выставляете значение "No wrap - bottom of < body >". UPD. Неактуально, исправили эту дичь с onload, теперь js код всегда добавляется как есть.

    Как выделить при помощи класса текущее число, не выходит
    добавляю...

    Это безумие - currDay является датой, а вы пытаетесь работать с ней как с DOM нодой, classList.add, бред какой-то. Ну и само условие неправильное - год и месяц вы всегда при проверке используете одни и те же, где тут currDay? Должен быть. А проверка числа - ещё одно безумие, вы его сравниваете с объектом даты. Ну и наконец, почему всё это происходит после цикла, откуда там будет доступна ячейка с сегодняшней датой? - проверяйте дату при создании разметки ячейки таблицы, и в зависимости от результата прямо туда, в разметку, добавляйте атрибут class.

    Есть и ещё косяки:

    Не очищаете содержимое #calendar-body при переключении месяца. Не хватает tbl.innerHTML = ''; перед циклом.

    Условие продолжения цикла - currDay.getMonth() <= month. Представьте, что следующий месяц - январь, год кончается. Что будет с вашим условием? Правильно, оно останется истинным. Навсегда. Лучше сделать так: проверяете равенство, без "меньше", а while заменяете на do-while - тогда числа предыдущего месяца, формально не подходящие под условие, всё равно будут обработаны, так как тело цикла выполняется до проверки условия.

    UPD. Зачем дни недели вписаны в первую неделю? - я бы их в заголовок таблицы (thead) вынес.

    Неочевидный косяк - переменный размер календаря. В зависимости от количества дней в месяце и дня недели первого числа количество недель может быть равно 4, 5 или 6. Пусть всегда будет 6. Да, будет показываться больше дней из соседних месяцев, но высота календаря перестанет изменяться при переключении месяца.

    https://jsfiddle.net/v4fwn8dx/
    Ответ написан
    2 комментария
  • Как написать регулярное выражение для удаление всех символов до первого пробела?

    0xD34F
    @0xD34F Куратор тега JavaScript
    str.replace(/^\S+ /, '')
    
    // или
    
    str.match(/(?<= ).+/)[0]
    
    // или
    
    str.split(' ').slice(1).join(' ')
    
    // или
    
    str.slice(str.indexOf(' ') + 1)
    Ответ написан
    3 комментария
  • Как пронумеровать уже назначенные ID?

    0xD34F
    @0xD34F Куратор тега JavaScript
    document.querySelectorAll('.restab').forEach((n, i) => {
      n.id = `responsivetable${++i}`;
    });
    
    // или
    
    for (const [ i, n ] of document.querySelectorAll('.restab').entries()) {
      n.attributes.id.value = 'responsivetable' + (i + 1);
    }
    
    // или
    
    const elems = document.getElementsByClassName('restab');
    for (let i = 0; i < elems.length; i++) {
      elems[i].setAttribute('id', 'responsivetable'.concat(-~i));
    }
    Ответ написан
    Комментировать
  • Как передать параметры в статический метод через конструктор?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Чтобы не выглядеть сумасшедшим, вам следует дополнить вопрос рассказом о том, зачем вам потребовалось делать метод статическим - сейчас является очевидным, что у него нет причин быть таковым.

    Ну а непосредственно отвечая на ваш вопрос - Basket.totalPrice.call(data). Но, повторюсь, это безумие.
    Ответ написан