无法读取未定义的属性"下拉列表"

Question

我正在尝试将我的代码转换为更多插件类型的代码，因此所有内容都将分开，以防将来更改类名。

出于某种原因，在我的代码中，我得到了Cannot read property 'dropdown' of undefined.

我的猜测是，该函数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;

这是我的应用程序.js文件，我运行所有init函数。

window.$ = window.jQuery = require('jquery');
import Navigation from './layout/navigation.js';

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

Answer 1

我想你在作用域$(document).on('click', this.hideAllDropdowns);有问题

让我们试试

    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));
    },

并通过toggleNavigation功能内部的event.data.self替换所有this.config

Answer 2

toggleNavigation上下文中的this是指单击的元素。

这就是为什么您可以执行$(this).siblings(...)来获取同级元素的原因。

您需要具有对导航对象的引用。也许您可以使用允许您传递额外数据的on语法$(this.config.trigger).on('click', this, this.toggleNavigation);

然后重写处理程序

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();
},

Answer 3

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

let module = {
  config() {
    console.log(`config(): 'this' is 'module' ---> ${Object.is(this, module)}`);
    console.log(`config(): 'this' is 'document' ---> ${Object.is(this, document)}`);
  },
  init() {
    console.log(`init(): 'this' is 'module' ---> ${Object.is(this, module)}`);
    console.log(`init(): 'this' is 'document' ---> ${Object.is(this, document)}`);
    
    module.config();
  }
};
$(document).ready(module.init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>