练习-元素的排序

最新推荐文章于 2022-01-19 16:17:50 发布

奋斗中的切图猿

最新推荐文章于 2022-01-19 16:17:50 发布

阅读量93

点赞数

分类专栏： js练习题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44573096/article/details/107400701

版权

js练习题专栏收录该内容

28 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .bgYellow{
        background-color: yellow;
    }
    </style>
</head>
<body>
    <ul>
        <li>音乐1：贝加尔湖畔</li>
        <li>音乐2：贝加尔湖畔</li>
        <li>音乐3：贝加尔湖畔</li>
        <li>音乐4：贝加尔湖畔</li>
        <li>音乐5：贝加尔湖畔</li>
        <li>音乐6：贝加尔湖畔</li>
    </ul>
    <button>上升</button>
    <button>下降</button>
    <script>
    var oUl = document.querySelector("ul");
    var aBtn = document.querySelectorAll("button");
    var aLi = oUl.children;
    // 点击的li背景颜色改变，其它li的背景颜色不改变
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function (){
            for(var j=0;j<aLi.length;j++){
                aLi[j].className = "";
            }
            this.className = "bgYellow";
        }
    }
    // 上升时，判断有没有上一个兄弟元素，有的话往上一个兄弟元素的前面插
    aBtn[0].onclick = function (){
        var oLi = document.querySelector(".bgYellow");   //获取背景颜色是黄色的li
        if(oLi.previousElementSibling){
            oUl.insertBefore(oLi,oLi.previousElementSibling);
        }
    }
    // 下降时，判断有没有下一个下一个兄弟元素，有的话，在下一个下一个兄弟元素的前面插
    aBtn[1].onclick = function (){
        var oLi = document.querySelector(".bgYellow");
        if(oLi.nextElementSibling.nextElementSibling){
            oUl.insertBefore(oLi,oLi.nextElementSibling.nextElementSibling);
        }else{    //当下降到倒数第2行时，直接将这个元素放到最后
            oUl.appendChild(oLi);
        }
    }
    </script>
</body>
</html>