Javascript 在jQuery中使用此方法_Javascript_Jquery_Prototype

Javascript 在jQuery中使用此方法

javascript jquery

Javascript 在jQuery中使用此方法,javascript,jquery,prototype,Javascript,Jquery,Prototype,在jQuery方法中捕获对象数据时遇到问题： this.start = function() { var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';

在jQuery方法中捕获对象数据时遇到问题：

this.start = function() {
            var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
            $("#desktop_image_slider").prepend(prepend);
            this.boxList.shift(this.imageList[0]);
            $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
            $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
                $("#" + this.boxList[this.boxList.length-1].name).remove();
                this.imageList.push(this.boxList[this.boxList.length-1]);
                this.boxList.splice(this.boxList.length-1, 1);
                $timeout(function() {
                    this.start();
                }, 1000);
            });
        }

this.start=function（）{
var prepend=''；
$（“#桌面#图像#滑块”）.prepend（prepend）；
this.boxList.shift（this.imageList[0]）；
$（“#”+this.boxList[this.boxList.length-1].name）。动画（{“width”：“0%”），500）；
$（“#”+this.imageList[0].name）.animate（{“width”：“11.1111111%”），500，function（）{
$（“#”+this.boxList[this.boxList.length-1].name）.remove（）；
this.imageList.push（this.boxList[this.boxList.length-1]）；
this.boxList.splice（this.boxList.length-1,1）；
$timeout（函数（）{
这个。start（）；
}, 1000);
});
}

它抛出未定义的。它显然是从jQuery而不是我的方法中获取了一些东西。有没有办法访问我的方法

谢谢

尝试将对象this作为函数中的参数传递。

当您进入另一个函数上下文时，这会有所不同。因此，首先将其存储在另一个变量中

start = function() {
            var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
            $("#desktop_image_slider").prepend(prepend);
            this.boxList.shift(this.imageList[0]);
            $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
            var oldThis = this;
            $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
                $("#" + oldThis.boxList[this.boxList.length-1].name).remove();
                oldThis.imageList.push(this.boxList[this.boxList.length-1]);
                oldThis.boxList.splice(this.boxList.length-1, 1);
                $timeout(function() {
                    oldThis.start();
                }, 1000);
            });
        }

start=function（）{
var prepend=''；
$（“#桌面#图像#滑块”）.prepend（prepend）；
this.boxList.shift（this.imageList[0]）；
$（“#”+this.boxList[this.boxList.length-1].name）。动画（{“width”：“0%”），500）；
var oldThis=这个；
$（“#”+this.imageList[0].name）.animate（{“width”：“11.1111111%”），500，function（）{
$（“#”+oldThis.boxList[this.boxList.length-1].name）.remove（）；
oldThis.imageList.push（this.boxList[this.boxList.length-1]）；
oldThis.boxList.splice（this.boxList.length-1，1）；
$timeout（函数（）{
oldThis.start（）；
}, 1000);
});
}

当您进入另一个函数上下文时，情况会有所不同。因此，首先将其存储在另一个变量中

start = function() {
            var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
            $("#desktop_image_slider").prepend(prepend);
            this.boxList.shift(this.imageList[0]);
            $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
            var oldThis = this;
            $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
                $("#" + oldThis.boxList[this.boxList.length-1].name).remove();
                oldThis.imageList.push(this.boxList[this.boxList.length-1]);
                oldThis.boxList.splice(this.boxList.length-1, 1);
                $timeout(function() {
                    oldThis.start();
                }, 1000);
            });
        }

start=function（）{
var prepend=''；
$（“#桌面#图像#滑块”）.prepend（prepend）；
this.boxList.shift（this.imageList[0]）；
$（“#”+this.boxList[this.boxList.length-1].name）。动画（{“width”：“0%”），500）；
var oldThis=这个；
$（“#”+this.imageList[0].name）.animate（{“width”：“11.1111111%”），500，function（）{
$（“#”+oldThis.boxList[this.boxList.length-1].name）.remove（）；
oldThis.imageList.push（this.boxList[this.boxList.length-1]）；
oldThis.boxList.splice（this.boxList.length-1，1）；
$timeout（函数（）{
oldThis.start（）；
}, 1000);
});
}

任何时候定义一个稍后调用的匿名函数时，您都会丢失预期的

此

。解决此问题的一种方法是使用，例如：

this.start = function() {
    var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
    $("#desktop_image_slider").prepend(prepend);
    this.boxList.shift(this.imageList[0]);
    $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
    $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
        $("#" + this.boxList[this.boxList.length-1].name).remove();
        this.imageList.push(this.boxList[this.boxList.length-1]);
        this.boxList.splice(this.boxList.length-1, 1);
        $timeout(function() {
            this.start();
        }.bind(this), 1000); // bind this to timeout callback
    }.bind(this)); // bind this to animate callback
}

this.start=function（）{
var prepend=''；
$（“#桌面#图像#滑块”）.prepend（prepend）；
this.boxList.shift（this.imageList[0]）；
$（“#”+this.boxList[this.boxList.length-1].name）。动画（{“width”：“0%”），500）；
$（“#”+this.imageList[0].name）.animate（{“width”：“11.1111111%”），500，function（）{
$（“#”+this.boxList[this.boxList.length-1].name）.remove（）；
this.imageList.push（this.boxList[this.boxList.length-1]）；
this.boxList.splice（this.boxList.length-1,1）；
$timeout（函数（）{
这个。start（）；
}.bind（this），1000）；//将此绑定到超时回调
}.bind（this））；//将其绑定到动画回调
}

任何时候定义一个稍后调用的匿名函数时，您都会丢失预期的

此

。解决此问题的一种方法是使用，例如：

this.start = function() {
    var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
    $("#desktop_image_slider").prepend(prepend);
    this.boxList.shift(this.imageList[0]);
    $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
    $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
        $("#" + this.boxList[this.boxList.length-1].name).remove();
        this.imageList.push(this.boxList[this.boxList.length-1]);
        this.boxList.splice(this.boxList.length-1, 1);
        $timeout(function() {
            this.start();
        }.bind(this), 1000); // bind this to timeout callback
    }.bind(this)); // bind this to animate callback
}

this.start=function（）{
var prepend=''；
$（“#桌面#图像#滑块”）.prepend（prepend）；
this.boxList.shift（this.imageList[0]）；
$（“#”+this.boxList[this.boxList.length-1].name）。动画（{“width”：“0%”），500）；
$（“#”+this.imageList[0].name）.animate（{“width”：“11.1111111%”），500，function（）{
$（“#”+this.boxList[this.boxList.length-1].name）.remove（）；
this.imageList.push（this.boxList[this.boxList.length-1]）；
this.boxList.splice（this.boxList.length-1,1）；
$timeout（函数（）{
这个。start（）；
}.bind（this），1000）；//将此绑定到超时回调
}.bind（this））；//将其绑定到动画回调
}

使用箭头函数为匿名函数词法上下文维护相同的

此

：

$("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, () => {
  ... with this
}

使用箭头函数为匿名函数词法上下文维护相同的

此：
$("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, () => {
  ... with this
}

动画函数事件处理程序中引用的this
正在引用调用的事件函数。不是您的全局此。您可以使用.bind（this）
或使用const\u self=this然后引用\u self.imageList

本例使用const\u self=This

start = function() {
    var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
    $("#desktop_image_slider").prepend(prepend);
    this.boxList.shift(this.imageList[0]);
    $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
    var _self = this;
    $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
        $("#" + _self[_self.boxList.length-1].name).remove(); // _self is used instead of this
        _self.imageList.push(_self.boxList[_self.boxList.length-1]); // _self is used instead of this
        _self.boxList.splice(_self.boxList.length-1, 1); // _self is used instead of this
        $timeout(function() {
            _self.start(); // _self is used instead of this
        }, 1000);
    });
}

动画函数事件处理程序中引用的this
正在引用调用的事件函数。不是您的全局此。您可以使用.bind（this）
或使用const\u self=this然后引用\u self.imageList

本例使用const\u self=This

start = function() {
    var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
    $("#desktop_image_slider").prepend(prepend);
    this.boxList.shift(this.imageList[0]);
    $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
    var _self = this;
    $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
        $("#" + _self[_self.boxList.length-1].name).remove(); // _self is used instead of this
        _self.imageList.push(_self.boxList[_self.boxList.length-1]); // _self is used instead of this
        _self.boxList.splice(_self.boxList.length-1, 1); // _self is used instead of this
        $timeout(function() {
            _self.start(); // _self is used instead of this
        }, 1000);
    });
}

动画函数事件处理程序中引用的this
正在引用调用的事件函数。不是您的全局此。您可以使用.bind（this）
或使用const\u self=this
然后引用\u self.imageList
。使用@VtoCorleone回复，因为这是在JqueryYes中使用此回复的正确方式，这是最好的方式，我能够让它与您的评论一起工作，您是第一个回答的人，您应该发布一个答案，以便我可以投票，如果您愿意的话。只是pos