jQuery - случайная движущаяся анимация с использованием прототипального шаблона наследования

Question

Я делаю анимацию, что каждый элемент списка будет плавно перемещаться внутри его обертки. Я пытаюсь собрать образец прототипального наследования, но он этого не делает. Есть несколько мест, которые, по моему мнению, могут быть причиной этой проблемы, но мне нужно посоветоваться.

function Menu($item) { 
    this.item = $item; 
}; 

Menu.prototype.makeNewPosition = function ($container) { 
    var h = $container.height() - 50; 
    var w = $container.width() - 50; 

    var nh = Math.floor(Math.random() * h); 
    var nw = Math.floor(Math.random() * w); 

    return [nh, nw]; 
}; 


Menu.prototype.move = function() { 
    $.each(this.item, function(index, value) { 
     var newq = this.makeNewPosition(value.parent()); 
     value.animate({ 
      top: newq[0], 
      left: newq[1] 
     }, 400, function() { 
      this.move(); 
     }); 
    }); 
}; 

var $menu = new Menu($('.nav li')); 
$menu.move(); 

В move функции есть animate и в этом я звоню move снова запустить анимацию на неопределенное время. Если он вызывает себя в прототипной структуре, можно ли его называть this?

Непонятно также об использовании $.each в пределах move функция.

Вот JSfiddle

Answer 1

Вот уборщицей версии

• использует себя вместо того, что - я использую that, большинство людей используют self - Я отличаюсь: р
• набор $value = $(value) ... DRY

.

function Menu($item) { 
    this.item = $item; 
}; 

Menu.prototype.makeNewPosition = function ($container) { 
    var h = $container.height() - 50; 
    var w = $container.width() - 50; 

    var nh = Math.floor(Math.random() * h); 
    var nw = Math.floor(Math.random() * w); 

    return [nh, nw]; 
}; 


Menu.prototype.move = function() { 
    var self = this; 
    $.each(this.item, function(index, value) { 
     var $value = $(value); 
     var newq = self.makeNewPosition($value.parent()); 
     $value.animate({ 
      top: newq[0], 
      left: newq[1] 
     }, 400, function() { 
      self.move(); 
     }); 
    }); 
}; 

var $menu = new Menu($('.nav li')); 
$menu.move(); 

original answer below - which contains explanation of changes

Вот все ошибки фиксированной, а не только первый

function Menu($item) { 
    this.item = $item; 
}; 

Menu.prototype.makeNewPosition = function ($container) { 
    var h = $container.height() - 50; 
    var w = $container.width() - 50; 

    var nh = Math.floor(Math.random() * h); 
    var nw = Math.floor(Math.random() * w); 

    return [nh, nw]; 
}; 


Menu.prototype.move = function() { 
    var that = this; // added that because the this isn't the this you want in the $.each function 
    $.each(this.item, function(index, value) { 
     var newq = that.makeNewPosition($(value).parent()); 
     //   ^^^^     ^^ ^
     //   that instead of this 
     //        $(value) instead of value 
     $(value).animate({ 
     // ^^ ^
     // $(value) instead of value 
      top: newq[0], 
      left: newq[1] 
     }, 400, function() { 
      that.move(); 
      //^^^^ another this to that change 
     }); 
    }); 
}; 

var $menu = new Menu($('.nav li')); 
$menu.move(); 

Там же способы очистки кода еще больше, но эти изменения должны заставить вас работать по крайней мере

Рабочие изменения на вашей скрипке http://jsfiddle.net/wzmh63xb/16/

Answer 2

Ошибки. Попробуй это. это работает.

Menu.prototype.move = function() { 
    var self = this; 
    $.each(this.item, function(index, value) { 
     var newq = self.makeNewPosition($(value).parent()); 

     $(value).animate({ 
     top: newq[0], 
     left: newq[1] 
    }, 400, function() { 
     self.move(); 
    }); 
    }); 
}; 

DEMO