Aframe анимация с идентификатором разделения JavaScript

Question

Я занимаюсь разработкой приложения Aframe WebVR, пытаюсь написать функцию, которая разделит this.id на две части и затем передаст его переменной.setattribute

это мой код

AFRAME.registerComponent('remove-yellow', {
  init: function () {
    this.el.addEventListener('click', function (evt) {
    console.log(this.id);
    var boxid = this.id.split("-")[0];
    console.log(boxid);
    boxid.setAttribute("animation__scale", "property: scale; from: 1 1 0.01; to: 0.001 0.001 0.001; dur: 150");
    });
  }
});

с помощью var boxid консоль выдаст необработанное сообщение об ошибке TypeError: boxid.setAttribute не является функцией. Это окно, которое я пытаюсь анимировать:

<a-box id="box1" position="0 2 -1.5" rotation="0 0 0" depth="0" width="1" height="1" color="#39dbd8" scale="0.001 0.001 0">
        <a-entity id="info" width="1" position="0 0 0.6" text="value: Hello people what is going on AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa; color:#000;"></a-entity>
        <a-box id="box1-close" class="clickable" remove-yellow id="box2" position="0.4 0.4 0.6" rotation="0 0 0" depth="0" width="0.15" height="0.15" color="#f00" scale="1 1 0">
        </a-box>
</a-box>
<a-box id="box1-show" class="clickable" add-yellow id="box3" position="0 2 -2" rotation="0 0 0" depth="0" width="0.5" height="0.5" color="#008000" scale="1 1 0"></a-box>

при нажатии box1-show его идентификатор будет разделен на "-", box1 получит атрибут анимации. Если я напишу:

box1.setAttribute("animation__scale", "property: scale; from: 1 1 0.01; to: 0.001 0.001 0.001; dur: 150");

он будет работать нормально. Но с var boxid консоль выдаст необработанную ошибку TypeError: boxid.setAttribute не является функцией.

Я пробовал коды ниже из других решений, которые я нашел:

$(boxid).attr('animation__scale', 'property: scale; from: 1 1 0.1; to: 0.001 0.001 0.001; dur: 150');

ошибка исчезнет, ​​но не оживит.

Я думаю, что это может быть синтаксическая ошибка, у кого-нибудь есть идеи?

Answer 1

Сначала id является box1-close затем его объявили box2, Лучше всего использовать id только для идентификации, а не для контрабанды данных:)

Обычно вы можете использовать глобальный атрибут данных:

<div data-id="box1"></div>

Но, учитывая, что лучше всего использовать систему компонентов a-frame, вам нужно использовать схему компонента.

---

Если компонент манипулирует любым другим элементом на сцене, просто сделайте

<a-entity my-component="param: value">

и получить доступ к нему в компоненте по ссылке this.data.param,

---

Кроме того, идентификатор, разделенный или нет, это просто строка, вы не можете установить какие-либо атрибуты для него, следовательно, ошибка. Если вы хотите установить атрибут для элемента, который он представляет, вы можете получить его, используя: document.querySelector("#" + value).setAttribute() или более правильно с document.getElementById(value).setAttribute(),

Вы можете проверить это в моей скрипке.