我的滑块在特定于上下文的情况下工作,但是当我尝试使其与上下文无关时,它会中断。我的代码出了什么问题?

时间:2013-02-11 17:30:48

标签: javascript jquery html css

这是我正在处理的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;
}

1 个答案:

答案 0 :(得分:0)

我明白了!这是代码。

$(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都与问题中的相同。