Creating the first jQuery plugin: understanding this

Question

I made a simple carousel for my site, and I want to go to the next step. I would like to have some carousels on the page, and I would just call $('.carousel').swapify()and end it.

Here is what I still have:

$.fn.swapify = function() {
  var $this = $(this);
  console.log('this is currently: ' + this.selector);

  function advanceSlide() {
    $('.swapify li:first-child').appendTo('.swapify');
  }

  $(this).find('li').click(function() { advanceSlide(); });
}

$(document).ready(function () {
  $('.carousel').swapify();
});

When I interact with the carousel, they all move forward. This is pretty obvious, but I'm not sure how to make the interaction concrete. I tried something like:

$('li:first-child', this).appendTo(this);

I am still developing my javascript dictionary and it is hard to prove google.

edit: I am setting up a script to illustrate this problem http://jsfiddle.net/69FM7/1/

Answer 1

jQuery (jQuery.fn) , , this jQuery, $('.carousel'), carousel. , this, .

, , , , . .each() . , , this DOM, jQuery, $(this).

, var $this = $(this) "", . , advanceSlide - , , $this, advanceSlide.

, $this, this , . ( , .) , $carousel, , .

advanceSlide , function() { }, .click() ( .on()).

, , JSFiddle:

$.fn.swapify = function () {
    // Here, `this` is a jQuery collection with multiple elements in
    this.each(function () {
        // Here, `this` is a single DOM node

        // using `var`, we make a variable bound to this scope
        // while we're at it, we wrap the DOM node with jQuery
        // Rather than $this, I've named the variable something meaningful
        var $carousel = $(this);

        // Declaring a function in the same scope as our var
        // creates a "closure",  which can always see the scope it was created in
        function advanceSlide() {
            // When this runs, it will be in response to a click,
            // and jQuery will set `this` to the element clicked on

            // Our $carousel variable, however, is carried in the closure,
            // so we know it will be the container we want
            $carousel.find('li:first-child').appendTo($carousel);
        }

        // A function in JS is just another kind of object, 
        // so we can pass in advanceSlide like any variable
        $carousel.find('li').on('click', advanceSlide);
    });
}

$(document).ready(function () {
    $('.swapify').swapify();
});

Answer 2

IMSoP - , , , , - :

$.fn.swapify = (function() {
    function advanceSlide(e) {
        var $carousel = $(e.delegateTarget);
        $carousel.find('li:first-child').appendTo($carousel);
    }

    return function swapify() {    
        this.on("click", "li", advanceSlide);
    };
}());

Fiddle

---

:

• IIFE . .

  (function() {
      // new scope here   
  }());
  

  , advanceSlide swapify .

• Closures

  IIFE - swapify. – advanceSlide. "" , advanceSlide "" swapify, – .

• $.fn jQuery prototype. , , jQuery , .

  $("someselector") jQuery. IIFE $.fn.swapify, jQuery .

• swapify li – , .find("li").on(...) – . jQuery , target , .

  , ul, li. , , . , .

• delegatedTarget

  , , . , target, currentTarget delegatedTarget. delegatedTarget , , $this. , .

Answer 3

You can achieve this using below:

$.fn.swapify = function() {
  $.each($(this), function(index, element) {
    var $this = $(this);

    function advanceSlide() {
       $this.find('li:first-child').appendTo($this);
    }

    $this.find('li').click(function() { advanceSlide(); });
  });
}

As $thisdenotes a specific selector for which swapify get bind.

Demo script

This will fix your problem.