Question

I’m building a plugin with the code below. If I change $(opts.section, this).animate to $(opts.section).animate it works as I want it too, but it animates all instances of the section element, and I want it to only affect this current one. Once I add “this” to it, it stops working all together.

  $('.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

The this inside the function is different than the this outside your function. EDIT: as @FabricioMatte’s answer says -” this in the scope of your $(“.next”, this) handler references the element that triggered the handler”.

So, you need to store the outer this in a separate variable so you can access it inside your function. 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
        });
      }
    }
  });

Even though this might seem strange at first, it’s actually the same behavior you’d see any time you assign a new value in the local scope of a function, it’s just that the this assignment is hidden.

Quick example of closures/scoping: Say you have a variable scoped, you could replicate the behavior as follows:

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();

Just imagine you replaced “scoped” with “this” and you should get the general idea (it’s as if someone set var this = triggerElement inside the scope of the function.