Question

我正在尝试在jquery插件中创建一个递归函数，该插件用于更改图像src属性（从而更改图像...），并在其间设置间隔。现在，当我将数据记录到我的控制台时，x的值会根据需要增加，但我的图像没有变化。

所以我做的是我记录$(this).attr("id")进行交叉检查。现在我的第一次运行函数，我的元素的id正确记录，但第二次，它来了undefined。出了点问题。

我需要帮助来解决这个问题，并且基本上会反复改变图像。

这是我的插件代码：

(function($) {

$.fn.addimate = function(noOfImages, prefix, x, extension, interval) {

    if (x > noOfImages) {
        x = 1;
    }

    console.log($(this).attr("id") + "\n" + prefix + x + extension + "\n" + interval);
    $(this).attr("src", prefix + x + extension);
    x ++;

    setTimeout(function() {
        $(this).addimate(noOfImages, prefix, x, extension, interval);
    }, interval);
}

}) (jQuery);

非常感谢帮助。感谢...

Answer 1

在编写jQuery插件时，您应该了解您正在使用匿名函数中的jQuery对象，因为您正在将jQuery传递给该函数。因此，在使用jQuery实例时，您不需要使用$（this）来处理该对象。当您在jQuery命名空间中使用$（this）时，您正在尝试创建jQuery对象的jQuery对象。话虽如此，这是不可取的，也不是有效的。

拿你的代码，例如：

(function($) {

$.fn.addimate = function(noOfImages, prefix, x, extension, interval) {

    //Intentionally deleted content.
}; //AND you're missing a semicolon here

}) (jQuery);

当有人拨打$（＆＃39; .selector＆＃39;）。addimate（）时，他们会将$（。。selector）传递给您。所以，你已经在使用jQuery对象了。你的代码应该是这样的。

(function($) {

$.fn.addimate = function(noOfImages, prefix, x, extension, interval) {

    var $this = this; //This will maintain the context of the jQuery object.

    if (x > noOfImages) {
        x = 1;
    }

    console.log(this.attr("id") + "\n" + prefix + x + extension + "\n" + interval);
    this.attr("src", prefix + x + extension);
    x++;

    setTimeout(function() {
        $this.addimate(noOfImages, prefix, x, extension, interval);
    }, interval);
};

}(jQuery));

请看这个小提琴：http://jsfiddle.net/m2X4E/

JQuery插件中的循环函数

1 个答案: