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

Question

[Стив]

Вот пример:



Нужно, чтобы обе графы с оценками работали, но вторая не работает. Почему?

Answer 1

[0xD34F]

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

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

const container = document.querySelector('.nav-student-new-lesson');
const blockSelector = '.grade-item-block';
const itemSelector = `${blockSelector} .grade-item`;
const colors = {
  grades: [
    [ 5, 'rgba(150, 255, 0, 0.3)' ],
    [ 3, 'rgba(255, 150, 0, 0.3)' ],
    [ 1, 'rgba(255,   0, 0, 0.3)' ],
  ],
  default: 'white',
};

function updateGrade(item) {
  const items = item.closest(blockSelector).querySelectorAll(itemSelector);
  const grade = 1 + Array.prototype.indexOf.call(items, item);
  const color = colors.grades.find(n => n[0] <= grade)[1];
  items.forEach((n, i) => n.style.background = i < grade ? color : colors.default);
}

Можно сделать делегированный обработчик:

container.addEventListener('click', e => {
  const item = e.target.closest(itemSelector);
  if (item) {
    updateGrade(item);
  }
});

Или слушать клики непосредственно на .grade-item:

container.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => updateGrade(e.currentTarget));

Answer 2

[Валентин Бируля]

https://jsfiddle.net/5czr48gL/5/

Потому что ты работаешь с двумя графами а не с одним

Comments

[Стив]

Спасибо за ответ! А сточки зрения экономии возможно ли обойтись без дубликации кода?

[Валентин Бируля]

CenterJoin, Использовать переменную вместо класса .grade-item

[Стив]

Валентин Бируля, можно пример, как это реализовать?