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

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") 

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

Answer 2

调试您的问题非常困难，但是有一件事对我来说看起来“不正确”！

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

因此，您应该在eventHandler部分进行如下验证：

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
}

但是，在进一步检查后，我注意到实际上A-Frame（work）似乎没有将attributeName visible元素attributeValue设置为"true"|"false" 。
相反，如果元素可见，则将其设置为visible="" ；如果元素不可见，则将其设置为visible="false" 。 因此，只有在这是对的情况下，您才应该这样做：

if ( this.el.getAttribute('visible') === 'false' ) { // validate against 'false' instead of false
    /* ... */
    this.el.setAttribute('visible', ''); // set to '' instead of true
} else if ( this.el.getAttribute('visible') === '' ) { // validate against '' instead of false
    /* ... */
    this.el.setAttribute('visible', 'false'); // set to 'false' instead of false
}