Question

基本上，我在一个框架中有一个模态窗口，试图通过JavaScript添加一个关闭按钮，但我一直无法弄清楚。

链接到下面的项目：

https://andrewmc1994.github.io/Image-Link-Test/

如果突出显示指南针图标，您将明白我的意思。

这是一个大学项目，我在网上查看了各种方法，但是似乎都不起作用，所以这就是我来这里的原因。

        <a-entity ui-modal="triggerElement:#selection;" visible="false">

         <a-image src="#submenu" scale="3.5 3.5 0" position="0 -0.25 2" src-fit></a-image>

            <a-image position="-1 -0.25 2.1" class="clickable" src="#tqicon" scale="0.7 0.7 0" link="href:location1.html; on: click; visualAspectEnabled: false" src-fit></a-image>

             <a-image position="0 -0.25 2.1" class="clickable" src="#acicon" scale="0.7 0.7 0" link="href:location3.html; on: click; visualAspectEnabled: false" src-fit></a-image>

             <a-image position="1 -0.25 2.1" class="clickable" src="#bchicon" scale="0.7 0.7 0" link="href:location2.html; on: click; visualAspectEnabled: false" src-fit></a-image>

            <a-image position="1.4 0 2.1" class="clickable" src="#close" scale="0.1 0.1 0" id="close" src-fit></a-image>

        </a-entity>

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    /**
     * UI modal component for A-Frame.
     */

    if (typeof AFRAME === 'undefined') {
      throw new Error('Component attempted to register before AFRAME was available.');
    }

    AFRAME.registerComponent('ui-modal', {

        schema: {
            trigger: {
                default: 'click'
            },
            triggerElement: {
              default: '',
            },
            zpos: {
                default: -4
            }
        },

        init: function() { 

            document.querySelector(this.data.triggerElement).addEventListener(this.data.trigger, this.eventHandler.bind(this));

            this.cameraEl = document.querySelector('a-entity[camera]');

            this.yaxis = new THREE.Vector3(0, 0, 0);
            this.zaxis = new THREE.Vector3(0, 0, 0);

            this.pivot = new THREE.Object3D();
            this.el.object3D.position.set(0, this.cameraEl.object3D.getWorldPosition().y, this.data.zpos);

            this.el.sceneEl.object3D.add(this.pivot);
            this.pivot.add(this.el.object3D);

        },


        eventHandler: function(evt) {

            if (this.el.getAttribute('visible') === false) {

                var direction = this.zaxis.clone();
                direction.applyQuaternion(this.cameraEl.object3D.quaternion);
                var ycomponent = this.yaxis.clone().multiplyScalar(direction.dot(this.yaxis));
                direction.sub(ycomponent);
                direction.normalize();

                this.pivot.quaternion.setFromUnitVectors(this.zaxis, direction);
                this.pivot.position.copy(this.cameraEl.object3D.getWorldPosition());

                this.el.setAttribute('visible', true);

            } else if (this.el.getAttribute('visible') === true) {

                this.el.setAttribute('visible', false);
            }

        },

        update: function (oldData) {},

        remove: function() {}

    });




/***/ }
/******/ ]);

因此，预期结果是用户打开模式窗口，然后能够使用简单的按钮将其关闭。

非常感谢您的帮助。

Answer 1

您只需要向现有的关闭按钮添加任何功能。您的eventHandler已经包含用于显示/隐藏UI的逻辑，因此只需在关闭按钮上添加一个侦听器即可：

let closeBtn = document.getElementById("close") one close button
closeBtn.addEventListener(this.data.trigger, this.eventHandler.bind(this))

单击时-将隐藏用户界面。

但是，ui-modal组件中有更多元素，并且它们的eventHandler触发了setAttribute("visible", "")部分。

最简单的解决方法是

closeBtn.addEventListener(this.data.trigger, e => {
  this.el.setAttribute("visible", "false")
})

让关闭按钮隐藏该元素，这里无需执行其他操作。

至于Axel的担忧，您实际上不需要做太多比较。您可以将它们视为布尔值：

这是有效的：

if (this.el.getAttribute("visible") {
  // hide
} else {
  // show
}

以及此：

// toggle visibility
this.el.setAttribute("visible", !this.el.getAttribute("visible")

您可以在this小提琴中查看它。

Answer 2

很难调试您的问题，但是有一件事情对我来说看起来“不合适”！

您的事件处理程序针对this.el.getAttribute('visible')和true将false验证为布尔值，但是getAttribute将始终返回一个字符串（该字符串将为'true'和{{1 }}（在这种情况下）或'false'（如果属性不存在）。

因此，您应该在null部分进行这样的验证：

eventHandler

但是，在进一步检查之后，我注意到实际上A框架（工作）似乎没有将attributeName if ( this.el.getAttribute('visible') === 'false' ) { // validate against 'false' instead of false /* ... */ this.el.setAttribute('visible', 'true'); // set to 'true' instead of true } else if ( this.el.getAttribute('visible') === 'true' ) { // validate against 'true' instead of true /* ... */ this.el.setAttribute('visible', 'false'); // set to 'false' instead of false }的元素attributeValue设置为visible。
相反，如果元素可见，则将其设置为"true"|"false"，如果元素不可见，则将其设置为visible=""。因此，只有在这种情况下，您才应该这样做：

visible="false"

如何在框架中向此JavaScript添加关闭按钮

2 个答案: