jQuery - 具有多个实例的推子

Question

我正在构建一个 jQuery 驱动的推子，并且我希望在一个页面上有多个实例。

Goal: I'm trying to build this from scratch without the assistance of a plugin.

What I've Tried:
1. Used this keyword/selector to create the variables needed, but am not getting what I need.
2. I had also setup a function with arguements, to find out the hard way jQuery won't seem to pass variables in this manner. Most lessons are best learned the hard way anyways.

问题:我在本地进行了几次迭代，但结果不同。我目前遇到了太多的递归错误，尽管它确实以某种形式在本地工作。

想法:我的下一步是对象表示法，但害怕用另一个错误的解决方案来旋转我的轮子。

谢谢大家

JSFiddle:http://jsfiddle.net/UQmc3/

要遵循的代码示例
HTML:

<div>
    <div class="w-fader">
        <ul class="w-slides">
            <li class="current"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /></li>
            <li class="next"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /></li>
            <li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /></li>      
        </ul>
    </div>

    <div class="w-fader">
        <ul class="w-slides">
            <li class="current"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /></li>
            <li class="next"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /></li>
            <li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /></li>
            <li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /></li>
            <li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /></li>
            <li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /></li>              
        </ul>
    </div>

</div>

jQuery/js:

var speed = 2000;
var name = 'fader';
var num = 1;

function setupUnique(){
$('.w-slides').each(function(){
    var panelId = $(this).attr('id');
    //alert(panelId);
    var nextItem = $(this).find('li.next');
    //alert(nextItem);
    var currentItem = $(this).find('li.current');
    var wrapHelperItem = $(this).find('.w-slides li.current+li');   
    var firstSwapItem = $(this).find('li:first');   
    var lastSwapItem = $(this).find('li:last'); 

    fadePanels();
    function fadePanels(){
    $('#'+panelId).each(function(){
        switcher();
        function switcher(){
        $(nextItem).animate({opacity:1}, speed, 'linear', function()
            {
                $(nextItem).removeClass('current');
                $(this).addClass('current');
                $(nextItem).addClass('next');
                $(this).removeClass('next');
                $(nextItem).css('opacity',0);
            });
        checker();
        }       

        //checker();

        function checker(){
        if($(lastSwapItem).hasClass('current'))
        {
            $(firstSwapItem).addClass('next');
            $(firstSwapItem).addClass('next').css('opacity',0);
        }
        else if($(firstSwapItem).hasClass('next') && $(lastSwapItem).hasClass('current'))
        {
            $(firstSwapItem).addClass('current');       
            $(wrapHelperItem).addClass('next');
            $(firstSwapItem).removeClass('next');
        }
    }

    setupUnique();
    });
    }
});
}

function makeUnique(){
$('.w-slides').each(function(){
    $(this).attr('id',name+num);
    num++;
    setupUnique();
    });
}

makeUnique();

Answer 1

我可能错误地读取了您的大括号 - 但您是从 setupUnique 内部调用 setupUnique() 吗？

这会导致问题。