lovecoding
/
Web1020


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box1,.box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            background-color:blue;
        } */
    </style>
</head>
<body>
    <!-- <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div> -->
    <div class="box">
        <div class="box1">
            项目一
            <button class="up-btn">向上</button>
            <button class="down-btn">向下</button>
        </div>
        <div class="box2">
            项目二
            <button class="up-btn">向上</button>
            <button class="down-btn">向下</button>
        </div>
        <div class="box3">
            项目三
            <button class="up-btn">向上</button>
            <button class="down-btn">向下</button>
        </div>
    </div>
    <script>
        // var oBox = document.getElementsByClassName("box")[0];
        // var oBox1 = document.getElementsByClassName("box1")[0];
        // var oBox2 = document.getElementsByClassName("box2")[0];
        // oBox.insertBefore(oBox2,oBox1);
        var aUpBtn = document.getElementsByClassName("up-btn");
        var aDownBtn = document.getElementsByClassName("down-btn");
        var oBox = document.getElementsByClassName("box")[0];
        for(var i=0;i<aUpBtn.length;i++){
            // 绑定向上按钮
            aUpBtn[i].onclick = function(){
                // 获取当前点击按钮的父元素
                var oParent = this.parentNode;
                // 获取当前点击按钮的父元素的上一个兄弟元素
                var oPre = oParent.previousElementSibling;
                if(oPre){
                    // 如果当前点击按钮的父元素的上一个兄弟元素存在 则向前位移
                    oBox.insertBefore(oParent,oPre);
                }else{
                    console.log("已经是第一个了");
                }
            }
            // 绑定向下按钮
            aDownBtn[i].onclick = function(){
                //获取当前点击按钮的父元素
                var oParent = this.parentNode;
                // 获取当前父元素的后边的兄弟
                var oNext = oParent.nextElementSibling;
                if(oNext){
                    // 如果当前点击按钮的父元素的后边的兄弟存在 则向后位移
                    oBox.insertBefore(oNext,oParent);
                }else{
                    console.log("已经是最后一个了")
                }
            }
        }
    </script>
</body>
</html>