Как задать ключ объекта через цикл,а потом во внутреннем цикле присвоить ему значение?

Question

Есть плитки цветов,при клике на плитку должны быть показаны все css правила, в которых встречается цвет плитки.

Идея такая:

1)есть массив цветов этих плиток,мы по нему проходимся циклом,в начале каждой итерации внутрь массива кладем объект с ключом=цвет итерации

2)потом внутри цикла проходимся другим циклом по всем css свойствам, если по условию цвет из css свойства совпадает с цветом нашей итерации,то добавляем это css свойство в ключ через пробел.

После завершения всех циклов получится нужный массив с объектами,но я не знаю как это технически реализовать

for (let i=0;i<mapColors.length;i++){
css_rules.push(obj)
for (let j = 0; j < document.styleSheets.length; j++) {
  for (let k = 0; k < document.styleSheets[j].cssRules.length; k++) {
     if (mapColors[i]===document.styleSheets[i].cssRules[j].style.color || document.styleSheets[i].cssRules[j].style.backgroundColor  ){
       /// Вот тут происходит добавление данных в ключ

     }
  }
}
}

Answer 1

Вы запутались в i, j и k. Создавайте промежуточные переменные с понятными именами и/или заверните обход всех свойств функцию. Это сделает код проще для восприятия. Вот немного изменённый ваш вариант.

const colors = ['blue', 'red'];
let rules = {};
for (let i = 0; i < colors.length; ++i) {
  let color = colors[i];
  rules[color] = [];
  for (let j = 0; j < document.styleSheets.length; ++j) {
    let styleSheet = document.styleSheets[j];
    for (let k = 0; k < styleSheet.cssRules.length; ++k) {
      let rule = styleSheet.cssRules[k];
      if (rule.style && color == rule.style.color) {
        rules[color].push(rule.selectorText);
      }
    }
  }
}
console.log(rules)

.foo {
  color: #f00;
}

.bar {
  color: red;
}

Обратите внимание, что вы обходите все стили снова и снова для каждого цвета. Это не очень оптимально. Вы можете поступить иначе: для каждого стиля поищите цвет из стиля в мапе -- объекте вида colors = {'red: true, 'blue': true}, если ключ существует -- if (colors[rule.style.color]) { ... }, то пуште правило в результат.

Ещё момент, в примере я добавил цвета red и #f00, они одинаковые, но скрипт этого не видит, в зависимости от вашей задачи, вам может потребоваться приводить цвета к общему виду.

БЛОГ НА HUSL

Как задать ключ объекта через цикл,а потом во внутреннем цикле присвоить ему значение?

Ответы (1 шт):