javascript - 我的滑块在特定于上下文时有效，但是当我尝试使其与上下文无关时，它会中断。我的代码有什么问题？

Question

这是我正在处理的 jQuery。当我输入正确的 id 等时，该loop()函数工作得非常好，但是现在我已经将它包装在Slider()函数中，它被破坏了。我不知道如何解决它。有什么帮助吗？（jsfiddle http://jsfiddle.net/yramagicman/Uc8LW/8/）

$(document).ready(function () {
function Slider(wrapper, kids) {
    this.wrapper = wrapper;
    this.kids = kids;
this.loop = function(wrapper, kids) {
    var count = $(wrapper).children().length,
        fade = 1000,
        selector = [],
        delay = 1000;
        console.log(count); //logs 0
    for (var i = 1; i < count + 1; i++) {
        selector[i] = $(wrapper + ' ' + kids + ':nth-child(' + i + ')');
                        selector[i].addClass('hidden');
                        console.log(selector[i]);
    }
    var z =1;
    console.log(selector[z]); //logs undefined
    selector[z].each(function () { //uncaught type error
        $(this).addClass('visible').fadeIn(fade).delay(delay).fadeOut(fade, function () {
            $(this).hide().remove().appendTo(wrapper);
        }); //end callback
    });
};
$(wrapper).children().addClass('hidden');
//setInterval(loop, 1000); //commented out for debugging. Don't want a loop doing nothing.
loop();
}
Slider('#slider', 'li');
}); // end ready

相关的html

<ul id="slider">
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
<li> item 4</li>
</ul>

和CSS

.hidden{
position: absolute;
left: -10000px;
top: -10000px;
} 
.visible{
position: static;
}

Answer 1

我想到了！这是代码。

$(document).ready(function () {
var loop = function (wrapper, kids, fade, delay) {
    var count = $(wrapper).children().length,
        selector = [];
    $(wrapper).children().fadeOut(0);
    for (var i = 1; i < count + 1; i++) {
        selector[i] = $(wrapper + ' ' + kids + ':nth-child(' + i + ')');
    }
    var z = 1;
    selector[z].each(function () {
        $(this).fadeIn(fade).delay(delay).fadeOut(fade, function () {
            $(this).remove().appendTo(wrapper);
        }); //end callback

    });

};

setInterval(function () {
    loop('#slider', 'li', 2000, 7000);
}, 0);
});
// end ready

所有 HTML 都与问题中的相同。