带有 javascript 拆分 ID 的 Aframe 动画

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 is not a function。这是我要制作动画的盒子：

<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 被点击时，它的 id 会被分割成“-”，然后 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 is not a function。

我已经从我找到的其他解决方案中尝试了以下代码：

$(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 仅用于识别目的，而不是走私数据:)

通常您可以使用全局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()。

您可以在我的fiddle 中查看。