如何在框架中向此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
}