jQuery模块模式：单击切换功能无法使用

Question

当我尝试访问方法“ dropDownUserInfo”时，单击时出现错误[无法读取未定义的属性'slideToggle'

代码：

(function(){
var homePage = {
        init: function(){
            this.cacheDom();
            this.bindEvent();
        },            
        cacheDom: function(){
            this.$userInfo = $('.user-info a');
            this.$userContent = $('.user-info-content');
        },
        bindEvent: function(){                
            this.$userInfo.on('click', this.dropDownUserInfo);
        },
        dropDownUserInfo: function(){                                                                                                                     
            this.$userContent.slideToggle(500);
            this.$userInfo.toggleClass('active');   
       },          
    }
    homePage.init();
})();

Answer 1

事件处理程序方法 float_year_to_datetime(1949.083) # datetime.datetime(1949, 2, 1, 0, 0) 中的

this将引用引发事件的DOM元素。

您可以使用Function.bind()设置其上下文。

dropDownUserInfo

这是一个例子

this.$userInfo.on('click', this.dropDownUserInfo.bind(this));

(function() {
  var homePage = {
    init: function() {
      this.cacheDom();
      this.bindEvent();
    },
    cacheDom: function() {
      this.$button = $('button');
    },
    bindEvent: function() {
      this.$button.on('click', this.buttonClick.bind(this));
      this.$button.on('click', this.buttonClick2);
    },
    buttonClick: function() {
      this.$button.toggleClass('active');
    },
    buttonClick2: function() {
      console.clear();
      this.$button.text('active'); //Will throw error
    }
  }
  homePage.init();
})();

.active {
  color: red
}

Answer 2

函数this中的dropDownUserInfo引用了调用事件的对象。因此，您可以像这样更改代码：

this.$userInfo.on('click', this.dropDownUserInfo.bind(this))