Ответы пользователя 0xD34F по тегу «JavaScript»

Как заставить работать несколько граф с оценками?

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

вторая не работает

Работает. Только не независимо, а как часть первой. Надо не все .grade-item обрабатывать, а только те, у кого тот же родитель, что и у кликнутого:

document.querySelector('.nav-student-new-lesson').addEventListener('click', e => {
  if (e.target.classList.contains('grade-item')) {
    const items = [...e.target.parentNode.children];
    const grade = 1 + items.indexOf(e.target);
    const color = [
      [ 5, 'rgba(150, 255, 0, 0.3)' ],
      [ 3, 'rgba(255, 150, 0, 0.3)' ],
      [ 1, 'rgba(255, 0, 0, 0.3)' ],
    ].find(n => n[0] <= grade)[1];

    items.forEach((n, i) => n.style.background = i < grade ? color : 'white');
  }
});

Ответ написан более двух лет назад

Комментировать

Как переключить подсветку на следующий элемент списка при нажатии стрелок вверх-вниз?

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

const listEl = document.querySelector('#list');
const activeClass = 'active';
let index = 0;

next(0);

document.addEventListener('keydown', function(e) {
  const step = ({
    ArrowDown: 1,
    ArrowUp: -1,
  })[e.key];

  if (step) {
    next(step);
  }
});

function next(step) {
  const elems = listEl.children;
  elems[index].classList.remove(activeClass);
  index = Math.max(0, Math.min(elems.length - 1, index + step));
  // или, если надо, чтобы при переходе от последнего к следующему элементу
  // активным становился первый, а при переходе от первого к предыдущему
  // активным становился последний
  // index = (index + step + elems.length) % elems.length;
  elems[index].classList.add(activeClass);
}

Ответ написан более двух лет назад

Комментировать

Как вернуть новый массив объектов только с уникальным id вложенного объекта?

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

Какие тут есть варианты:

Object.values(Object.fromEntries(arr.map(n => [ n.user.id, n ])))

// или, если в результирующий массив должны попадать те из "одинаковых" элементов,
// что расположены в исходном массиве первыми

Object.values(arr.reduce((acc, n) => (acc[n.user.id] ??= n, acc), {}))

// или, если также надо сохранять взаимное расположение элементов

arr.filter(function({ user: { id: n } }) {
  return !(this[n] = this.hasOwnProperty(n));
}, {})

Можно решить задачу и в более общем виде - сделаем генератор, выдающий уникальные значения. Принимает в качестве параметров итерируемый объект и признак, по которому осуществляется уникализация (может быть функцией или именем свойства):

function* unique(data, key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set;

  for (const n of data) {
    const k = getKey(n);
    if (!keys.has(k)) {
      keys.add(k);
      yield n;
    }
  }
}

Теперь можно делать так (ваш случай): const result = [...unique(arr, n => n.user.id)];.

Или так:

Array.from(unique([{id: 1}, {id: 2}, {id: 1}, {id: 1} ], 'id')) // [{id: 1}, {id: 2}]

Или так: ''.concat(...unique('ABBA')) // 'AB'.

Или так:

for (const n of unique(Array(20).keys(), n => Math.sqrt(n) | 0)) {
  console.log(n); // 0 1 4 9 16
}

Ответ написан более двух лет назад

Комментировать

Как активировать select по нажатию на radio?

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

const radios = document.querySelectorAll('[name="radios"]');
const selects = Array.from(radios, n => n.nextElementSibling);
const onChange = e => selects.forEach(n => n.disabled = n !== e.target.nextElementSibling);
radios.forEach(n => n.addEventListener('change', onChange));

Ответ написан более двух лет назад

1 комментарий

Как создать массив чисел, которые увеличиваются с каждой итерацией?

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

const arithmeticProgression = ({ length, a1 = 0, d = 1 }) =>
  Array.from(
    { length },
    (n, i) => a1 + i * d
  );


const arr = arithmeticProgression({
  length: 10,
  a1: 6,
  d: 3,
});

или

function* arithmeticProgression(a1, d, length) {
  for (let i = 0; i < length; i++) {
    yield a1 + i * d;
  }
}


for (const n of arithmeticProgression(100, 10, 5)) {
  console.log(n);
}

console.log(Array.from(arithmeticProgression(10, -7, 10)));

Ответ написан более двух лет назад

Комментировать

Как сделать object to HTML string?

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

const voidTags = [ 'input', 'img', 'br', 'hr', ещё какой-то тэг, и ещё, ... ];

function createHTML(data) {
  const attrs = Object
    .entries(data.attrs ?? {})
    .map(n => `${n[0]}="${n[1]}"`)
    .join(' ');

  const startTag = `<${data.tagName}${attrs && (' ' + attrs)}>`;

  if (voidTags.includes(data.tagName)) {
    return startTag;
  }

  const children = (data.subTags ?? [])
    .map(createHTML)
    .join('');

  return `${startTag}${data.text ?? ''}${children}</${data.tagName}>`;
}

Войдите на сайт