JQUERY遍历问题。

Question

具体结构如下

html

<div class="list">
    <img src="" />
</div>
<div class="item">
    <div class="img active"><img src="images/01.jpg" /></div>
    <div class="img"><img src="images/02.jpg" /></div>
    <div class="img"><img src="images/03.jpg" /></div>
    <div class="img"><img src="images/04.jpg" /></div>
    <div class="img"><img src="images/05.jpg" /></div>
</div>
<div class="r-button">点我切换下一张</div>

我写的JQUERY

$('.r-button').on('click',function(){
    $('.item .img').each(function(){
        if($(this).is('.active')){
            var num = $(this).index() + 1;
            var img = $('.item .img').eq(num).children('img').attr('src');
            $('.item .img').eq(num).addClass('active').siblings().removeClass('active');
            $('.list img').attr('src',img);
        }
    });
});

问题描述：
我当前想实现的效果是，点击.r-button会获取下一张图片src并把值传到.listDIV里的img来显示。并把当前所在的.active给所切换的.imgDIV上。请问，我写的JQUERY哪里出了问题？还望解答，非常感谢！~

Answer 1

//点击.r-button
$('.r-button').on('click',function(){
    //会获取下一张图片src
    var $active = $('.item').children('.active');
    var nextSrc = $active.next().attr('src');
    //并把值传到.listDIV里的img来显示
    $('.list').children('img').attr('src', nextSrc);
    //并把当前所在的.active给所切换的.img DIV上
    $active.removeClass('active').next().addClass('active');
});

你自己讲逻辑的时候也没说“每一个”、“都”这种东西呀，怎么写起来的时候就带上遍历了呢？

Answer 2

把你切换的操作 别在遍历里面写 这个是最严重的 其他的吃完饭在给你看看?

你可以想想 第一个active 然后 转移到第二个 第二个也符合条件了 又转移了。。。。。。。。。。逻辑就有问题

Answer 3

方法有很多
建议把点击做的事情抽离出来，可以扩展更多的操作

下方代码没有测试，思路是这样

//序列
var index = 0;
var len = $('.item .img').length;

//渲染
function render(i){
    $('.item .img').eq(i).addClass('active');
    $('.list img').attr('src',$('.item .img').eq(i).attr('src'))
}

//初始化
render(0);

//点击切换
$('.r-button').on('click',function(){
    $('.item .img').eq(index).removeClass('active');
    index++;//累加
    index%=len;//循环
    render(index);
});

如果说要加一个上一张的功能

那么就可以添加如下代码

//上一张操作
$('.l-button').on('click',function(){
    $('.item .img').eq(index).removeClass('active');
    index--;
    index%=len;
    render(index);
});

当然还可以根据需求扩展更多，上面只是示例

Answer 4

$('.r-button').on('click',function(){
        var num = $('.item .img').hasClass('active').index();
        var el = $('.item .img').eq(num + 1);
        var src = el.find('img').attr('src');
        el.addClass('active').siblings().removeClass('active');
        if(src) {
            $('.list img').attr('src',src);
        }
    });

遍历是多余的啊