切换菜单的 A 框按钮不起作用

Question

切换菜单工作不正常。它在某些情况下工作，例如“菜单二”工作正常。我认为，在其他菜单中完全相同，但那里的按钮不起作用。在菜单三、四和六中，我可以进入，但无法使用其他按钮。

我真的不明白这个问题。有人看到我的错误吗？我会很高兴。祝一切顺利，谢谢。

我在 WeTransfer 中上传了索引，因为很难确定代码的哪一部分有问题，请参见图片。

Answer 1

运行文件时出现以下错误：

<块引用>

未捕获的类型错误：无法读取 null 的属性 'querySelectorAll'
index.html:28

就是这一行：

28 | var menuItems = menu.querySelectorAll(".clickable");

这意味着“菜单”为空。在您的代码中：

26 | var menu = this.data;

这也意味着此代码将无法工作（甚至可能不会尝试，因为上面有错误）

66 |

for (var i = 0; i < menuItems.length; i++) {
    // classList.replace() is not currently supported in Microsoft Edge and Samsung Internet.
    // menuItems[i].classList.replace('clickable-disabled', 'clickable');
    // Workaround
    menuItems[i].classList.remove("clickable-disabled");
    menuItems[i].classList.add("clickable");
}

72 |

我不知道是什么元素抛出错误，但我希望这会为您指明正确的方向。

Answer 2

感谢您的回答。实际上问题是我确实用平面而不是实体定义了按钮。所以我想通了。但是性能真的很差，我改变了光标，所以光标是鼠标，它的工作真的很糟糕。你知道我可以如何提高性能吗？

free

和：AFRAME.registerComponent("toggle-menu", { dependencies: ["raycaster"], schema: { type: "selector" }, // menu.object3D.visible doesn't show correct value when init() is used, possibly due to load order. Use play() instead. play: function() { var button = this.el; var scene = this.el.sceneEl; var cursor = scene.querySelector("[raycaster]"); var menu = this.data; var menus = scene.querySelectorAll(".menu"); var menuItems = menu.querySelectorAll(".clickable"); // Replace .clickable with .clickable-disabled for our menu if it's hidden and refresh raycaster. if (!menu.object3D.visible) { for (var i = 0; i < menuItems.length; i++) { // classList.replace() is not currently supported in Microsoft Edge and Samsung Internet // menuItems[i].classList.replace('clickable', 'clickable-disabled'); // Workaround menuItems[i].classList.remove("clickable"); menuItems[i].classList.add("clickable-disabled"); } // Refresh raycaster. cursor.components.raycaster.refreshObjects(); } // Define handler function for event listener. function clickHandler(e) { // If our menu is already visible, return and exit function. if (!!menu.object3D.visible) return; // Hide all menus. for (var i = 0; i < menus.length; i++) { // If menu is our menu, skip to next menu in the loop. if (menus[i] === menu) continue; // Get each menu's items. var items = menus[i].querySelectorAll(".clickable"); // Hide each menu. menus[i].object3D.visible = false; // Disable each menu's items by temporarily removing class. for (var j = 0; j < items.length; j++) { // Replace class. // classList.replace() is not currently supported in Microsoft Edge and Samsung Internet. // items[j].classList.replace('clickable', 'clickable-disabled'); // Workaround items[j].classList.remove("clickable"); items[j].classList.add("clickable-disabled"); } } // Only show our menu. menu.object3D.visible = true; // Make our menu's items clickable. for (var i = 0; i < menuItems.length; i++) { // classList.replace() is not currently supported in Microsoft Edge and Samsung Internet. // menuItems[i].classList.replace('clickable-disabled', 'clickable'); // Workaround menuItems[i].classList.remove("clickable-disabled"); menuItems[i].classList.add("clickable"); } // Refresh raycaster objects. cursor.components.raycaster.refreshObjects(); } // Add event listener to the button. button.addEventListener("click", clickHandler); } });