Question

我编写了一个脚本，用于使用JavaScript模块模式单击按钮来“平滑滚动”。

因为我是第一次在模块模式上编写代码，所以我需要一些关于使用“this”的帮助。

当我将“scroll”函数绑定到我的“bindevents”函数时，我收到一条错误，指出“scroll”函数中的“this”未定义。

我应该如何使用“this”来选择我点击的按钮？

以下是代码：

var s, SmoothScroll = {

  Selectors: {
    Link: $('a[href*="#"]:not([href="#"])')
  },

  scroll: function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname && $(".classes .section").has(this).length == 0 ) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  },

  bindEvents: function() { 
    s.Link.click(function() {
      SmoothScroll.scroll();
    });
  },

  init: function(){
    s = this.Selectors;
    this.bindEvents();
  }

};

SmoothScroll.init();

Answer 1

变化：

s.Link.click(function() {
  SmoothScroll.scroll();
});

要

s.Link.click(SmoothScroll.scroll);

现在this函数中的scroll将是元素

如果this的不同上下文令人困惑，您可以将该元素作为scroll的参数传递

 bindEvents: function() {
   s.Link.click(function() {
     // "this" is element determined by jQuery 
     SmoothScroll.scroll(this);
   });
 },
 scroll: function(link) {
    // this === SmoothScroll
    if (location.pathname.replace(/^\//,'') == link.pathname.replace(/^\//,'') && location.hostname == link.hostname && $(".classes .section").has(link).length == 0 ) {
      var target = $(link.hash);
  .....

这在JavaScript模块模式上

1 个答案: