切换菜单的 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

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

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

和：<a-scene cursor="rayOrigin: mouse; fuse: false" raycaster="objects: .clickable" opacity="1">