Question

我正在使用下面的代码构建一个插件。如果我将$（opts.section，this）.animate更改为$（opts.section）.animate它也可以正常工作，但它会激活section元素的所有实例，我希望它只影响当前的那个。一旦我将“this”添加到它，它就会停止一起工作。

  $('.next', this).on({
    click: function() {
      if(count+2 <= totalElems) {
        count += 1;
        currentAnimationSpot += singleElem + opts.offset;
        $(opts.section, this).animate({
          left: -currentAnimationSpot
        });
      }
    }
  });

  $('.prev', this).on({
    click: function(){
      if(count != 1) {
        count-=1;
        currentAnimationSpot -= singleElem + opts.offset;
        $(opts.section, this).animate({
          left: -currentAnimationSpot
        });
      }
    }
  });

Answer 1

函数内的this与函数外的this不同。编辑：正如@ FabricioMatte的回答所说 - 你的$（“。next”，这个）处理程序范围内的“this引用了触发处理程序的元素”。

因此，您需要将外部this存储在单独的变量中，以便您可以在函数内访问它。 E.g。

var self=this;

$('.prev', this).on({
    click: function(){
      if(count != 1) {
        count-=1;
        currentAnimationSpot -= singleElem + opts.offset;
        // now use self here
        $(opts.section, self).animate({
          left: -currentAnimationSpot
        });
      }
    }
  });

尽管起初这看起来很奇怪，但实际上你在函数的局部范围内分配新值时会看到相同的行为，只是隐藏了this赋值。 / p>

闭包/范围的快速示例：假设您有变量scoped，您可以按如下方式复制行为：

var scoped = "Outer scope!";
var saved = scoped;

myfn() {
    var scoped = "Inner scope!";
    console.log("Inner `scoped` is " + scoped); // Inner `scoped` is Inner scope!
    console.log("Inner `saved` is " + saved);  // Inner `saved`` is Outer scope!
};

console.log("Outer scoped is: " + scoped); // Outer scope!
console.log("Outer saved is: " + saved); // Outer scope!
myfn();

想象一下你用“this”替换了“scoped”，你应该得到一般的想法（好像有人在函数范围内设置了var this = triggerElement。

在jQuery动画中使用“this”

1 个答案: