0

我正在尝试存储 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>

问题的代码

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

对此的任何指示都会很棒。

谢谢。

4

2 回答 2

4

document.querySelector()只返回第一个匹配元素。

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

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');
}
于 2018-04-22T16:07:05.113 回答
2

document.querySelector('a-marker');只会选择第一个。

如果你想选择所有的标记使用document.querySelectorAll('a-marker');会做到这一点。然后你将创建一个循环来为所有这些选定的节点做任何你想做的事情

就像是

var els= document.querySelectorAll('a-marker')
for (var i = 0,  i < els.length ; i++) {
console.log(els[i].getAttribute('id');)
}
于 2018-04-22T16:08:00.433 回答