具有 javascript split 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");
    });
  }
});

with var boxid, console 将给出未捕获的 TypeError: boxid.setAttribute is not a function.This is the box that I is trying to animate:

<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会收到animation属性。如果我写：

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

它将与 var boxid 一起工作 fine.But，控制台将给出未捕获的类型错误：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 用于识别目的，不要走私数据:)

通常您可以使用全局 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中查看。

具有 javascript split id 的 Aframe 动画

Aframe animation with javascript split id

html

javascript

webvr

aframe