3

我对 JS/JQuery/HTML 比较陌生，正在寻找一种方法来避免使用这么多内联/匿名函数。

这是我工作的例子：

initialize: function () {
    $('section.content').each(this.initWaypoints);
}

initWaypoints: function (index, item) {

    $(item).waypoint(function (direction) {
        $('.navButton.' + $(item).data('label')).toggleClass('active', direction === 'down');

    },{offset: '50%',vertical: true})

    $(item).waypoint(function (direction) {
        $('.navButton.' + $(item).data('label')).toggleClass('active', direction === 'up');

    },{offset: '-50%', vertical: true});

}

我更喜欢的是这样的：

initialize: function () {
    $('section.content').each(this.initWaypoints);
},

initWaypoints: function (index, item) {
    $(item).waypoint(this.down, {offset: '50%', vertical: true});              
    $(item).waypoint(this.up, {offset: '-50%', vertical: true});
},

down: function (direction) {
    $('.navButton.' + $(item).data('label')).toggleClass('active', direction === 'down');
},

up: function (direction) {
    $('.navButton.' + $(item).data('label')).toggleClass('active', direction === 'up');
}

我的问题是我的 up 和 down 方法不知道 $(item) 是什么，因为它们与第一个示例的范围不同。而且我还没有找到如何将项目传递给他们。

谢谢您的帮助。

4

3 回答 3

2

可能有几种方法可以做你想做的事。一种是为您的函数提供一个额外的item参数，并在您将函数传递给时绑定该参数waypoint：

initWaypoints: function (index, item) {
    $(item).waypoint(this.down.bind(this, $(item)), {offset: '50%', vertical: true});              
    $(item).waypoint(this.up.bind(this, $(item)), {offset: '-50%', vertical: true});
},

down: function (item, direction) {
    $('.navButton.' + item.data('label')).toggleClass('active', direction === 'down');
},

up: function (item, direction) {
    $('.navButton.' + item.data('label')).toggleClass('active', direction === 'up');
}
于 2013-07-03T17:25:51.327 回答
1

使用闭包。

尝试这个：

initialize: function () {
    $('section.content').each(this.initWaypoints);
},

initWaypoints: function (index, item) {
    $(item).waypoint(this.down(item), {offset: '50%', vertical: true});              
    $(item).waypoint(this.up(item), {offset: '-50%', vertical: true});
},

down: function (item) {
    return function(direction) {
      $('.navButton.' + $(item).data('label')).toggleClass('active', direction === 'down');
  }
},

up: function (item) {
   return function(direction) {
      $('.navButton.' + item.data('label')).toggleClass('active', direction === 'up');
   }
}
于 2013-07-03T17:27:20.430 回答
1

如果您不关心构建复杂的对象模型而只想将一些 jQuery 组合在一起，那么您可以简单地使用this：

down: function (direction) {
    $('.navButton.' + $(this).data('label')).toggleClass('active', direction === 'down');
},

up: function (direction) {
    $('.navButton.' + $(this).data('label')).toggleClass('active', direction === 'up');
}
于 2013-07-03T17:27:24.050 回答