javascript - 这行代码用jQuery怎么写，谢谢

Question

window.onload=function(){
            var oUl=document.getElementById('oUl');
            var aLi=oUl.children;

            for(var i=0;i<aLi.length;i++){
                if(i%2==0){
                    aLi[i].className='lef_ac';
                }else{
                    aLi[i].className='rig_ac';
                }
            }

            for(var i=0;i<aLi.length;i++){
                aLi[i].index=i;
                aLi[i].onmouseover=function(){
                    for(var i=0;i<aLi.length;i++){
                        if(i%2==0){
                            //左边  0 2 4 6 8
                            if(this.index>=i){
                                aLi[i].className='lef_on';
                            }else{
                                aLi[i].className='lef_ac';
                            }
                        }else{
                            //右边 1 3 5 7 9
                            if(this.index>=i){
                                aLi[i].className='rig_on';
                            }else{
                                aLi[i].className='rig_ac';
                            }
                        }
                    }
                }
            }
        }

Answer 1

你应该是写复杂了，我理解你意思是，左边和右边加的CSS样式不一样，然后鼠标放在LI上加一个class

$(function() {
    var oUl = $('#oUl');
    var aLi = $('#oUl li');

    aLi.each(function(i){
        if (i % 2 == 0) {
            $(this).addClass('lef_ac');
        } else {
            $(this).addClass('rig_ac');
        }
    });

    aLi.hover(unction () {
        if ($(this).hasClass('lef_ac')) {
            $(this).addClass('lef_on');
        } else {
            $(this).addClass('rig_on'');
        }
    }, function () {
        $(this).removeClass('lef_on');
        $(this).removeClass('rig_on');
    });

});

Answer 2

大概是这样，没验证

$(function() {
    var oUl = $("#oUl");
    var aLi = oUl.children();

    aLi.each(function(i, li) {
        if (i % 2 === 0) {
            $(li).addClass("lef_ac")
                .data("index", i)
                .on("mouseover", function() {
                    var index = $(this).data("index");
                    aLi.filter(":not(:lt(" + index + "))").removeClass("lef_ac").addClass("lef_on");
                    aLi.fitler(":lt(" + index + ")").removeClass("lef_on").addClass("lef_ac");
                });
        } else {
            $(li).addClass("rig_ac")
                .data("index", i)
                .on("mouseover", function() {
                    var index = $(this).data("index");
                    aLi.filter(":not(:lt(" + index + "))").removeClass("rig_ac").addClass("rig_on");
                    aLi.fitler(":lt(" + index + ")").removeClass("rig_on").addClass("rig_ac");
                });
        }
    });
});