Javascript 无法读取属性'；下拉菜单'；未定义的

我正在尝试将我的代码转换成一种插件类型的代码，这样一切都将被分离，以防将来更改类名

由于某些原因，在我的代码中，我无法读取未定义的属性“dropdown”

我的猜测是，函数

Navigation.bindEvents（）

在我设置配置之前运行，所以它找不到它。。。但我不知道怎么解决它

这是我的导航.js文件：

let Navigation = {
    config: {},

    init(config) {
        this.config = config;
        this.bindEvents();
    },
    bindEvents() {
        $(this.config.trigger).on('click', this.toggleNavigation);
        $(document).on('click', this.hideAllDropdowns);
    },

    toggleNavigation(event) {
        // Store the current visible state
        var visible = $(this).siblings(this.config.trigger).hasClass('visible');


        // Hide all the drop downs
        this.hideAllDropdowns();

        // If the stored state is visible, hide it... Vice-versa.
        $(this).siblings(this.config.content).toggleClass('visible', !visible);

        event.preventDefault();
        event.stopPropagation();
    },

    hideAllDropdowns() {
        $(this.config.dropdown + ' ' + this.config.content).removeClass('visible');    
    }
}

export default Navigation;

这是我运行所有

init

函数的app.js文件

window.$ = window.jQuery = require('jquery');

import Navigation from './layout/navigation.js';


Navigation.init({
    dropdown: '.dropdown',
    trigger: '.dropdown-trigger',
    content: '.dropdown-content'
});

---

我猜您对scope

$（文档）有问题

让我们试试看

    bindEvents() {
        $(this.config.trigger).on('click', this.toggleNavigation);
        $(document).on('click', this.hideAllDropdowns.bind(this));
    },

更新：

    bindEvents() {
        $(this.config.trigger).bind('click', {self:this}, this.toggleNavigation);
        $(document).on('click', this.hideAllDropdowns.bind(this));
    },

并将所有
this.config
替换为
event.data.self
中的
toggleNavigation
函数我猜您对scope
$（文档）有问题

让我们试试看

    bindEvents() {
        $(this.config.trigger).on('click', this.toggleNavigation);
        $(document).on('click', this.hideAllDropdowns.bind(this));
    },

更新：

    bindEvents() {
        $(this.config.trigger).bind('click', {self:this}, this.toggleNavigation);
        $(document).on('click', this.hideAllDropdowns.bind(this));
    },

并将所有
this.config
替换为
event.data.self
中的
toggleNavigation
函数
在
toggleNavigation
上下文中，此
指单击的元素

这就是为什么您可以执行
$（this）.sibbines（…）
来获取同级元素

您需要有对导航对象的引用。也许您可以使用
on
语法来传递额外的数据
$（this.config.trigger）

然后重写处理程序

toggleNavigation(event) {
    //get the navigation reference
    var nav = event.data;
    // Store the current visible state
    var visible = $(this).siblings(nav.config.trigger).hasClass('visible');


    // Hide all the drop downs
    nav.hideAllDropdowns();

    // If the stored state is visible, hide it... Vice-versa.
    $(this).siblings(nav.config.content).toggleClass('visible', !visible);

    event.preventDefault();
    event.stopPropagation();
},

此
在
Togglenavision
的上下文中指的是单击的元素

这就是为什么您可以执行
$（this）.sibbines（…）
来获取同级元素

您需要有对导航对象的引用。也许您可以使用
on
语法来传递额外的数据
$（this.config.trigger）

然后重写处理程序

toggleNavigation(event) {
    //get the navigation reference
    var nav = event.data;
    // Store the current visible state
    var visible = $(this).siblings(nav.config.trigger).hasClass('visible');


    // Hide all the drop downs
    nav.hideAllDropdowns();

    // If the stored state is visible, hide it... Vice-versa.
    $(this).siblings(nav.config.content).toggleClass('visible', !visible);

    event.preventDefault();
    event.stopPropagation();
},

这个
的行为是JavaScript中最难理解的事情之一。这里
这个
显然是动态的，这意味着它的值取决于调用方法的位置


let模块={
config（）{
log（`config（）：'this'是'module'-->${Object.is（this，module）}`）；
log（`config（）：'this'是'document'-->${Object.is（this，document）}`）；
},
init（）{
log（`init（）：'this'是'module'-->${Object.is（this，module）}`）；
log（`init（）：'this'是'document'-->${Object.is（this，document）}`）；
module.config（）；
}
};
$（document）.ready（module.init）
这个
的行为是JavaScript中最难理解的事情之一。这里
这个
显然是动态的，这意味着它的值取决于调用方法的位置


let模块={
config（）{
log（`config（）：'this'是'module'-->${Object.is（this，module）}`）；
log（`config（）：'this'是'document'-->${Object.is（this，document）}`）；
},
init（）{
log（`init（）：'this'是'module'-->${Object.is（this，module）}`）；
log（`init（）：'this'是'document'-->${Object.is（this，document）}`）；
module.config（）；
}
};
$（document）.ready（module.init）
我为他们两个都添加了它，当我单击下拉列表时，与之前的情况相比，它什么也不做，我单击时，它说
无法读取未定义的属性下拉列表。错误还在吗？如果不是的话，我想你的鼠标还有一个问题。也许你应该使用$（this.config.content）而不是$（this.config.dropdown+''+this.config.content）我修复了它，这是一个与使用
this
有关的问题，当在单击处理程序中
this
不再引用对象，在本例中，
Navigation
因此我将所有的
this
语句更改为
Navigation
，不确定这是否是一件好事，但它起了作用。我将投票支持这个答案，因为它给了我一个暗示。谢谢，酷！因此，我将答案更新为适合您的问题我为这两个问题都添加了答案，当我单击下拉列表时，与之前的情况相比，它什么也不做，在之前的情况下，我单击，它说，
无法读取未定义的属性下拉列表。
。错误仍然存在吗？如果不是的话，我想你的鼠标还有一个问题。也许你应该使用$（this.config.content）而不是$（this.config.dropdown+''+this.config.content）我修复了它，这是一个与使用
this
有关的问题，当在单击处理程序中
this
不再引用对象，在本例中，
Navigation
因此我将所有的
this
语句更改为
Navigation
，不确定这是否是一件好事，但它起了作用。我将投票支持这个答案，因为它给了我一个暗示。谢谢，酷！所以我更新了答案以适合你的问题