带有javascript分割id的帧动画

我正在开发一个框架WebVR应用程序，试图编写一个函数，将this.id拆分为两部分，并将其赋给变量then.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，console将给出未捕获的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>

它可以很好地工作，但对于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');

错误将消失，但不会设置动画

---

我想这可能是语法错误，有人知道吗？

首先

id

是

box1 close

，然后它被重新声明为

box2

。最好仅将

id

用于识别目的，而不是走私数据：）

通常，您可以使用全局属性：

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

但考虑到最好充分利用a型架组件系统， 您需要使用组件的模式。

---

如果组件操纵场景中的任何其他元素，只需执行以下操作

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

---

啊，我不知道它不会知道它不是身份证。谢谢！
<a-entity my-component="param: value">