JS控制 li 标签的class值添加与删除

Question

<div id="processor">
            <ol class="processorBox oh">
                <li class="current">
                    <div class="step_inner fl">
                        <span class="icon_step">1</span>
                        <h4>
                            填写注册信息</h4>
                    </div>
                </li>
                <li>
                    <div class="step_inner">
                        <span class="icon_step">2</span>
                        <h4>
                            公司信息</h4>
                    </div>
                </li>
                <li>
                    <div class="step_inner fr">
                        <span class="icon_step">3</span>
                        <h4>
                            个人资料</h4>
                    </div>
                </li>
            </ol>
            <div class="step_line">
            </div>

    <a id="nextBtn" class="btn btn_primary" href="javascript:;" >下一步</a>


    $('#nextBtn').click(function () {      
                    var i = $('.processorBox li').index();
               $('.processorBox li').removeClass('current').eq(i).addClass('current');
               $('.step').fadeOut(300).eq(i).fadeIn(500);
            }
        });

点击下一步按钮时，触发onclick事件，将第一个li标签的class值删除，并在下一个li标签上添加class值，，以上是我自己写的，但是点击后没有反映，而且 var i 获取的值为0 ，，，求大神解决

Answer 1

index()获得第一个匹配元素相对于其同胞元素的 index 位置，所有返回的是0。eq() 选择器选取带有指定 index 值的元素。
你的$('.processorBox li').removeClass('current').eq(i).addClass('current')这一步是删除了第一个li的class之后又给他添加class.你可以这样
$('.processorBox li').removeClass('current').eq(i+1).addClass('current')就是他的下一个li了。