Получение всех элементов массива одновременно

Ниже — очень короткий код, который сортирует каждый диапазон в новый массив в зависимости от имеющегося у него className.

Что у меня сейчас есть: как только наводится курсор на квадрат указанного class, ОНО ПОЛУЧАЕТ уникальный для своего class цвет.

Чего мне нужно было добиться: Как только наводится один из указанных class - ВСЕ classList ПРЕДМЕТЫ ПОЛУЧАЮТ уникальный цвет своего class.

Может кто-нибудь сказать мне, что не так в коде ниже? Спасибо!

let allDivs = [...document.querySelectorAll(`div`)];
let Classes = [ "A0", "A1", "A2", "A3" ];

console.info(`let 'allDivs' equals:`);
console.info(allDivs);

for (let i = 0; i < Classes.length; i++) {
  let allDivsFiltered = allDivs.filter(item => (item.className.match(`A${i}`)));

  console.info('---- ---- ---- ----');
  console.info(`let 'allDivsFiltered [${i}]' equals:`);
  console.info(allDivsFiltered);

  // allDivsFiltered.classList.add(`B${i}`); // THIS DOESN'T WORK;

  for (let all of allDivsFiltered) {
    all.onmouseover = () => {
      all.classList.add(`B${i}`); // This does work,
      // but seperately on each one;

      // allDivsFiltered.classList.add(`B${i}`); // DOESN'T WORK HERE
        // AS WELL;
    };

    console.info(all);
  };
};

body {
  display: flex;
  flex-wrap: wrap;
}

div[class^ = "A"] {
  position: relative;
  background-color: slategray;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  margin-top: 4px;
  margin-left: 4px;
}

div[class^ = "A"].B0 {
  background-color: red;
}

div[class^ = "A"].B1 {
  background-color: blue;
}

div[class^ = "A"].B2 {
  background-color: green;
}

div[class^ = "A"].B3 {
  background-color: yellow;
}

<div class = "A0"></div>
<div class = "A0"></div>
<div class = "A0"></div>
<div class = "A1"></div>
<div class = "A1"></div>
<div class = "A2"></div>
<div class = "A2"></div>
<div class = "A3"></div>
<div class = "A3"></div>

Вам нужно будет зациклить allDivsFiltered в обработчике наведения курсора мыши и добавить класс к каждому из них. Сейчас вы добавляете класс только к наведенному элементу.

— 12.08.2024 06:02

Мне интересно, почему бы и нет document.querySelectorAll(`div.${Classes[i]}`);

— 12.08.2024 06:06

Ох, пробовал, но не получается @Wyck

— 12.08.2024 06:07

Спасибо большое, это ответ!!! @Фил

— 12.08.2024 06:10

другой подход заключается в использовании умного CSS :has(.A0.active) .A0 { background-color: red;} — тогда, если какой-либо из .A0 также .active, то все .A0 получат этот фон

— 12.08.2024 08:07

javascript

12.08.2024 05:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Я бы организовал код немного по-другому, группируя каждую отфильтрованную коллекцию и добавляя общий класс для обозначения наведенного/активного состояния.

const classes = ['A0', 'A1', 'A2', 'A3'];

const elements = classes.reduce(
  (map, c) => map.set(c, document.querySelectorAll(`.${c}`)),
  new Map(),
);

document.addEventListener('mouseover', ({ target }) => {
  target.classList.forEach((c) => {
    elements.get(c)?.forEach((e) => e.classList.add('active'));
  });
});

body {
  display: flex;
  flex-wrap: wrap;
}

div {
  position: relative;
  background-color: slategray;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  margin-top: 4px;
  margin-left: 4px;
}

.A0.active {
  background-color: red;
}

.A1.active {
  background-color: blue;
}

.A2.active {
  background-color: green;
}

.A3.active {
  background-color: yellow;
}

<div class = "A0"></div>
<div class = "A0"></div>
<div class = "A0"></div>
<div class = "A1"></div>
<div class = "A1"></div>
<div class = "A2"></div>
<div class = "A2"></div>
<div class = "A3"></div>
<div class = "A3"></div>

Ох, и большое спасибо за дополнительный код!

— 12.08.2024 06:15

12.08.2024 06:11

Вы почти у цели. Просто прокрутите allDivsFiltered, чтобы добавить или удалить класс.

Я также упростил ваш запрос до одного шага.

let Classes = ["A0", "A1", "A2", "A3"];

Classes.forEach((className, i) => {
  let allDivsFiltered = document.querySelectorAll(`div.${className}`);

  allDivsFiltered.forEach(div => {
    div.onmouseover = () => {
      allDivsFiltered.forEach(div => div.classList.add(`B${i}`));
    };

    div.onmouseout = () => {
      allDivsFiltered.forEach(div => div.classList.remove(`B${i}`));
    };
  });
});

body {
  display: flex;
  flex-wrap: wrap;
}

div {
  position: relative;
  background-color: slategray;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  margin-top: 4px;
  margin-left: 4px;
}

.B0 {
  background-color: red;
}

.B1 {
  background-color: blue;
}

.B2 {
  background-color: green;
}

.B3 {
  background-color: yellow;
}

<div class = "A0"></div>
<div class = "A0"></div>
<div class = "A0"></div>
<div class = "A1"></div>
<div class = "A1"></div>
<div class = "A2"></div>
<div class = "A2"></div>
<div class = "A3"></div>
<div class = "A3"></div>

12.08.2024 06:12

Думаю вместо add toggle подойдет.

let allDivs = [...document.querySelectorAll(`div`)];
let classes = [ "A0", "A1", "A2", "A3" ];

classes.forEach(className => {
  const elementsWithClass = document.querySelectorAll(`.${className}`);

  elementsWithClass.forEach(element => {
    element.addEventListener('mouseover', () => {
      elementsWithClass.forEach(element => element.classList.toggle(`B${className.slice(1)}`));
    });

    element.addEventListener('mouseout', () => {
      elementsWithClass.forEach(element => element.classList.remove(`B${className.slice(1)}`));
    });
  });
});

body {
  display: flex;
  flex-wrap: wrap;
}

div {
  position: relative;
  background-color: slategray;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  margin-top: 4px;
  margin-left: 4px;
}

.B0 {
  background-color: red;
}

.B1 {
  background-color: blue;
}

.B2 {
  background-color: green;
}

.B3 {
  background-color: yellow;
}

<div class = "A0"></div>
<div class = "A0"></div>
<div class = "A0"></div>
<div class = "A1"></div>
<div class = "A1"></div>
<div class = "A2"></div>
<div class = "A2"></div>
<div class = "A3"></div>
<div class = "A3"></div>

12.08.2024 06:37

Другие вопросы по теме

Как я могу сделать переход для добавления дочернего элемента, который увеличивает высоту смещения в HTML, JS или CSS?

Как использовать строку в функции JavaScript

Db.Collection не является конструктором

Есть ли способ отсортировать массив по наибольшему числу со строкой рядом с ним?

Проверьте ввод пользователя из HTML-формы с помощью JavaScript без использования фрейма

Список задач JavaScript: событие щелчка по значку корзины не удаляет элемент списка

Почему мой Javascript переключает два элемента одновременно?

Перенос функции хеширования JavaScript в Python

Переключение пользователей в игре крестики-нолики

Создайте динамический словарь в скрипте приложений Google Sheet

Получение всех элементов массива одновременно

Ответы 3

Другие вопросы по теме

Похожие вопросы