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()仅返回the first matching element。

您可能正在寻找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');
}

Answer 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');)
}

JavaScript仅识别第一个a-marker

2 个答案: