Попытка рефакторинга кода, чтобы сделать его более динамичным

Question

У меня 6 divs каждый с class="ray". Я написал несколько JS для своего 6 divs, но я хочу сделать его более динамичным c, чтобы, если бы я добавил 12 divs вместо 6, мне не пришлось бы вносить много изменений в свой код .

Вот код, который я написал, но я пытаюсь реорганизовать его и сделать его более динамичным c: (В моем исходном коде всего 6, в этом примере я показываю только 2 всего)

const rays = document.querySelectorAll(".ray");

let randAng1 = Math.random() * 90;
let randAng2 = Math.random() * 90;

let stopValue1 = Math.random() * 20;
let stopValue2 = Math.random() * 20;

let stop1 = Math.random() * stopValue1;
let stop2 = Math.random() * stopValue2;

let direction1 = "up";
let direction2 = "down";

setInterval(() => {
  rays[0].style.transform = "rotate(" + randAng1 + "deg)";
  rays[1].style.transform = "rotate(" + randAng2 + "deg)";

  if (randAng1 > 90 - stop1) direction1 = "down";
  if (randAng1 < 0 + stop1) direction1 = "up";
  if (direction1 === "up") {
    randAng1 += 0.1;
  } else {
    randAng1 -= 0.1;
  }

  if (randAng2 > 90 - stop2) direction2 = "down";
  if (randAng2 < 0 + stop2) direction2 = "up";
  if (direction2 === "up") {
    randAng2 += 0.2;
  } else {
    randAng2 -= 0.2;
  }
}, 50);

Я как-то думал о создании class Ray() {, но не знал, как объявить элемент div как класс, если это вообще возможно.

Answer 1

Вам не нужно объявлять div как class, вы можете передать div конструктору class, вот пример:

class Ray {
  constructor(div, direction = 'up', pace = 0.1) {
    this.div = div;
    this.randAng = Math.random() * 90;
    this.stopValue = Math.random() * 20;
    this.stop1 = Math.random() * stopValue;
    this.direction1 = direction;
    this.pace = pace;
  }

  update() {
    this.div.style.transform = "rotate(" + this.randAng + "deg)";
    if (this.randAng > 90 - this.stop) this.direction = "down";
    if (this.randAng < this.stop) this.direction = "up";
    if (this.direction === "up") {
      this.randAng += this.pace;
    } else {
      this.randAng -= this.pace;
    } 
  }
}

const rays = [...document.querySelectorAll(".ray")].map((div, index) => {
  const isEven = index % 2 === 0;
  const direction = isEven ? "up" : "down";
  const pace = isEven ? 0.1 : 0.2;
  const pace = new Ray(div, direction, pace);
  return pace;
});

setInterval(() => {
  rays.forEach(ray => ray.update());
}, 50);

Answer 2

Надеюсь, это поможет, этот класс динамически создаст тег абзаца (с id = 'ray'), вложенный в элемент div, и все это внутри элемента контейнера. For l oop внизу вызывает класс Ray для каждого элемента yourArray (это просто пример).

class Ray {
  constructor() {
    const div = document.createElement('div');
    const p = document.createElement('p');
    
    p.id = "ray";
    p.textContent = 'test';

    document.getElementById('container').appendChild(div);
    div.appendChild(p);
  }
}

const yourArray = [0, 1, 2, 3]; 
let createRays = [];
for (let i = 0; i < yourArray.length; i++) {
  createRays[i] = new Ray(yourArray[i]);
}

<div id="container"></div>