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

Я разрабатываю приложение 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');

ошибка исчезнет, ​​но не будет анимироваться.

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


javascript html aframe webvr
person Daryl Tan    schedule 06.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

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

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

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

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

person Piotr Adam Milewski    schedule 06.04.2018
comment
Ах, я не понимал, что он не узнает, что это не удостоверение личности. Спасибо! - person Daryl Tan; 06.04.2018