Question

我正在尝试将我的代码转换为更多插件类型的代码，所以一切都将被分开，以防我将来更改类名。

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

我的猜测是，函数Navigation.bindEvents()在我设置配置之前运行，所以找不到它......但我不知道如何解决它。

这是我的 Navigation.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'
});

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

并在this.config函数

中替换所有event.data.self toggleNavigation

Answer 2

this上下文中的

toggleNavigation引用了点击的元素。

这就是为什么你可以$(this).siblings(...)来获取兄弟元素的原因。

您需要引用Navigation对象。也许您可以使用允许传递额外数据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>

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

3 个答案: