Javascript 使用原型继承模式的随机移动动画

我正在制作一个动画，使每个列表项在其包装器中随机浮动。我试图使用原型继承模式来组合，但它没有这样做。有几个地方，我认为这可能是造成问题的原因，但我需要一些建议来继续

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

调用它吗

也不确定

$的用法。
移动
功能中的每个

---

这是一个更干净的版本

• 使用self而不是那-我使用

  那

  ，大多数人使用

  自我

  -我不同：p
• 设置

  $value=$（值）

  。。。干的

下面是原始答案-其中包含更改的解释

以下是所有已修复的错误，而不仅仅是第一个错误

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

有很多方法可以进一步清理代码，但这些更改至少可以让您工作

---

你的小提琴变了

这是你的错误。试试这个。它正在工作

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

---

有控制台错误要报告吗？

未捕获类型错误：value.parent不是一个函数

在控制台中。我现在看到了。我想我需要将

值

包装为jQuery对象才能访问

父对象（）

？谢谢，它现在可以播放动画，但只运行一次。

this.move（）

是自调用移动函数的正确方法吗？该死，将

this.move

更改为

that.move

-回答并拨弄updatedAh，明白了吗。将在3分钟内选择您的答案。谢谢顺便说一句，这真的很烦人：我会删除我的答案，因为这是完整的答案，但我也会将$（value）设置为另一个变量，这样它就会被重用，而不是实例化两次

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