столкновение области при написании плагина jQuery

Question

Я пытаюсь написать простой плагин jQuery, просто чтобы посмотреть, как это делается. Но я не могу запустить его дважды одновременно. По сути, это обратный отсчет, и все, что он делает, это получает значение text () в div и ведет обратный отсчет, пока не достигнет 1.

$('#box1').startCounter();
$('#box2').startCounter();

Этот вызов изменяет обе this переменные внутри функции, чтобы они указывали на # box2. Вот мой jsfiddle

Довольно странно, как this меняется в плагине jQuery. спасибо за любую помощь :)

Answer 1

Вы определили $this в глобальной области видимости, поэтому при вызове startCount для второго элемента значение перезаписывается. Используйте var, чтобы сделать его локальным:

var $this = this;

DEMO

---

Вместо того, чтобы снова вызывать функцию элемента, вы также можете сделать что-то вроде этого:

$.fn.startCount = function(count, div) {
    count = (count) ? count : parseInt($('span.no-display',this).text());
    var $target =  $('div.counter', this);

    var run = function() {
        if (count <= 1) {
            this.fadeOut().mouseout();
        }       
        else {
            count--;
            $target.text(count);
            setTimeout(run, 1000);
        }
    };
    run();
}

ДЕМО 2

---

И чтобы ваш плагин работал в среде, где $ не относится к jQuery (jQuery.noConflict()), вам нужно сделать:

(function($) {
    $.fn.startCount = ...
}(jQuery));