如何正确调用嵌套的JavaScript函数

Question

我试图将函数设置为可在整个脚本中调用的嵌套函数，但我不断收到“未定义错误不是函数”。 也许有人可以帮助我正确地做到这一点。

首先，我将全局变量设置为：

var trigger = document.getElementById('trigger');
var subject = document.getElementById('subject');

然后创建一个显示/隐藏功能：

var toggleVis = function() {

    function showSomething() {
        trigger.classList.add("active");
        subject.classList.add("active");
    }

    function hideSomething() {
        trigger.classList.remove("active");;
        subject.classList.remove("active");
    }

}

然后设置事件监听器：

trigger.addEventListener('click', function() {

    if ( subject.classList.contains("active") ) {
        toggleVis.hideSomething();
    }
    else {
        togglePicker.showPicker();
    }
}); 

我尝试这样做的原因是，页面上还会有其他触发主题的触发器，这些触发器需要访问show / hide函数。

Answer 1

您无法访问函数内部的函数，它们超出了范围，您可以将它们作为属性附加到包装函数，但是看起来您只需要一个对象

var toggleVis = {
    showSomething: function() {
        trigger.classList.add("active");
        subject.classList.add("active");
    },
    hideSomething: function() {
        trigger.classList.remove("active");;
        subject.classList.remove("active");
    }
}

Answer 2

您的togleVis变量是一个函数，而不是一个object因此您无法执行toggleVis.hideSomething() 。 尝试将代码更新为：

var toggleVis = (function() {
    return {
        showSomething : function () {
            trigger.classList.add("active");
            subject.classList.add("active");
        },

        hideSomething : function () {
            trigger.classList.remove("active");;
            subject.classList.remove("active");
        }
    };

}());

有了这个toggleVis ，现在是一个具有两个属性showSomething和hideSomething函数的对象。