Могу ли я добавить класс к динамически созданному элементу two.js? - PullRequest
Новая
       23

Могу ли я добавить класс к динамически созданному элементу two.js?

0 голосов
/ 23 февраля 2019

Я использую код, показанный ниже, чтобы создать 46 маленьких кружков внутри оберточных фигур (div); 

let elem = document.getElementById('draw-shapes');
let params = { width: 1024, height: 768 };
let two = new Two(params).appendTo(elem);

for (let i = 1; i < 47; i++) {
  circle = two.makeCircle(x, y, radius);
  circle.fill = 'green';
  circle.stroke = 'white';
  circle.linewidth = 1;
  circle.id = i;
}

Все рисунки сделаны с помощью библиотеки Two.js.Я прочитал в документации, я могу изменить идентификатор созданного элемента, но мне также нужно назначить класс для каждого элемента.Я перепробовал все от чистого js setAttribute до методов jQuery .attr и .addClass, но ни один из них не сработал, поэтому я задумался, возможно ли это вообще сделать?Если кто-то знает способ, пожалуйста, дайте мне знать, как.Спасибо.

1 Ответ

0 голосов
/ 23 февраля 2019

Нет внутренней утилиты или свойства для доступа к узлу DOM каждого элемента Two.

Но указанный вами id действительно добавляется как two-<specified-id> к фактическому узлу.

Так что вы можете использовать обычный document.getElementById.

Так что в вашем случае 

let elem = document.getElementById('draw-shapes');
let params = {
  width: 300,
  height: 300
};
let two = new Two(params).appendTo(elem);

for (let i = 1; i < 20; i++) {
  const circle = two.makeCircle(i * 10, i * 10, 40);
  circle.fill = 'green';
  circle.stroke = 'white';
  circle.linewidth = 1;
  circle.id = `two-circle-${i}`;
}
two.update();

// add classname to every fifth element;
for (let i = 1; i < 20; i += 5) {
  const circleNode = document.getElementById(`two-circle-${i}`);
  circleNode.classList.add('classname');

  circleNode.addEventListener('mouseover', function() {
    const path = two.scene.getById(this.id)
    path.scale = 1.2;
    two.update();
  });

  circleNode.addEventListener('mouseout', function() {
    const path = two.scene.getById(this.id)
    path.scale = 1;
    two.update();
  });
}
.classname {
  stroke-width: 5;
  stroke: red;
  fill:yellow;
  cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.js"></script>

<div id="draw-shapes"></div>
...