JavaScript 只识别第一个 a-marker

Question

我正在尝试存储 a-marker 标签的 id 属性并且代码工作正常，除了 JavaScript 只识别第一个 a-marker 标签而不识别第二个。

<script>
var place;
AFRAME.registerComponent('markerhandler', {
    tick: function () {
        if (document.querySelector('a-marker').object3D.visible == true) {
            el = document.querySelector('a-marker');
            console.log("gogogo");
            place = el.getAttribute('id');
            console.log(place);
        } else {
            el = null;
            place = null;
        }
    }
});
</script>

<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>

    <a-marker preset="kanji" id="2">
        <a-box position='0 0.5 0' material='opacity: 0.5;' markerhandler> 
    </a-box>
    </a-marker>

    <a-marker preset="hiro" id="1">
        <a-box position='0 0.5 0' material='opacity: 0.5;' markerhandler> 
        </a-box>
    </a-marker>

</a-scene>

Codepen of the problem

包括了有问题的片段和一个有效版本的codepen。如果我切换 a-markers 的顺序，只有第一个在控制台中打印出来。只是为了确认我没有同时向相机显示两个标记。

任何关于此的指示都会很棒。

谢谢。

Answer 1

document.querySelector() 仅 returns the first matching element。

您可能正在寻找 document.querySelectorAll() 其中 returns 您可以迭代并执行检查的匹配元素数组。

var markers = document.querySelectorAll('a-marker');

for (var i = 0; i < markers.length; i++) {
    if (markers[i].object3D.visible == true) {
        place = markers[i].getAttribute('id');
    }
}

或

var visibleMarker = markers.filter(function(marker) {
    return marker.object3D.visible;
})[0];

if (visibleMarker) {
    place = visibleMarker.getAttribute('id');
}

Answer 2

document.querySelector('a-marker'); 将 select 只有第一个。

如果您想要 select 所有使用 document.querySelectorAll('a-marker'); 的标记都可以。然后你会做一个循环来为所有那些selected节点

做任何你想做的事情

类似于

var els= document.querySelectorAll('a-marker')
for (var i = 0,  i < els.length ; i++) {
console.log(els[i].getAttribute('id');)
}

JavaScript 只识别第一个 a-marker

JavaScript only recognising first a-marker only

html

javascript

aframe

ar.js