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

あなたが望むことをするためのおそらくいくつかのアプローチがあります。1 つは、関数に追加の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 に答える