qq_31788907 2016-04-21 03:11 采纳率: 69.2%
浏览 1419
已采纳

Jquery语句换成JS写这段

图片说明求大神帮忙 第二句是别人打给我参考的

  • 写回答

2条回答 默认 最新

  • cocotsau 2016-04-21 14:08
    关注

    看下代码，真挺麻烦

     <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
li {float:left; height:50px; width:50px; background:#ccc; list-style:none; margin-left:5px;}
li.curr {background:red;}
</style>
<script type='text/javascript'>
function hasClass(obj, sCls){   
    return obj.className.match(new RegExp("\\b"+sCls+"\\b", "i"));      
}
function addClass(obj, sCls){   
    var blank=(obj.className!="")?" ":"";
    if(!hasClass(obj, sCls))obj.className+=blank+sCls;  
}

function removeClass(obj, sCls){    
    var re=new RegExp("(\\s|^)"+sCls+"(\\s|$)", "i");
    if(hasClass(obj, sCls))obj.className=obj.className.replace(re, ""); 
}
function prevAll(arr,sCls){
    var index=0;
    for(var i=0;i<arr.length;i++){
        if(hasClass(arr[i],sCls))index=i;
    }
    return index;
}
window.onload=function(){
    var aLi=document.getElementsByTagName('li'), index;

    var movePrev = function (){
        index=prevAll(aLi,'curr');
        if(index==0){//可循环移动
            removeClass(aLi[index],'curr');
            addClass(aLi[aLi.length-1],'curr');
            index = aLi.length-1;
            console.log(index);
        }else{
            removeClass(aLi[index],'curr');
            addClass(aLi[index-1],'curr');
            index--;
            console.log(index);
        }
    }       
    var moveNext = function (){
        index=prevAll(aLi,'curr');
        if(index==aLi.length-1){//可循环移动
            removeClass(aLi[aLi.length-1],'curr');
            addClass(aLi[0],'curr');
            index = 0;
        }else{
            removeClass(aLi[index],'curr');
            addClass(aLi[index+1],'curr');
            index++;
        }                           
    }
    document.onkeydown=function(e){
        var e = e || event,
        code = e.keyCode || e.which;
        code==38 && movePrev();
        code==40 && moveNext();             
    }

};
</script>
</head>
<body>
<ul>
    <li class='curr'></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题