js點選按鈕實現圖片排序

<style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
 
        .wrap {
            width: 440px;
            margin: 50px auto;
            text-align: center;
        }
 
        ul li {
            float: left;
            width: 100px;
            height: 130px;
            margin-right: 10px;
            margin-bottom: 10px;
            font-size: 12px;
        }
 
        ul li img {
            width: 100px;
            height: 100px;
        }
 
        ul li p {
            line-height: 30px;
            text-align: center;
            font-size: 12px;
        }
 
        .wrap button {
            display: inline-block;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: red;
            border: none;
            margin-right: 20px;
            margin-bottom: 20px;
            color: #fff;
            font-size: 16px;
        }
</style>

<div class="wrap">
        <button>從大到小</button><button>隨機排序</button>
        <ul>
            <li>
                <img src="./img1.jfif" alt="">
                柴犬<span>1</span>
            </li>
            <li>
                <img src="./img2.jfif" alt="">
                柴犬<span>2</span>
            </li>
            <li>
                <img src="./img3.jfif" alt="">
                柴犬<span>3</span>
            </li>
            <li>
                <img src="./img4.jfif" alt="">
                柴犬<span>4</span>
            </li>
            <li>
                <img src="./img5.jfif" alt="">
                柴犬<span>5</span>
            </li>
            <li>
                <img src="./img6.jfif" alt="">
                柴犬<span>6</span>
            </li>
            <li>
                <img src="./img7.jfif" alt="">
                柴犬<span>7</span>
            </li>
            <li>
                <img src="./img8.jfif" alt="">
                柴犬<span>8</span>
       </li>
</ul>

<script>
            /* 
                  2. 效果
                        2.1 點選按鈕 
                            如果按鈕文字是從大到小 將li標籤按照從大到小的順序排列 文字改成從小到大
                            如果按鈕文字是從小到大 將li標籤按照從小到大的順序排列 文字變成從大到小
                        2.2 點選按鈕 將li隨機排序 
                    標籤排序比較快
                    注意: 
                        獲取元素方式:
                            document/父元素.getElementsByTagName()
                            document/父元素.getElementsByClassName()
                            */
            // 1.獲取元素 button li ul 
            var btns = document.getElementsByTagName('button');
            var lis = document.getElementsByTagName('li');
            var ul = document.getElementsByTagName('ul')[0];
            console.log(btns, lis, ul);
 
            // 5.將集合轉成陣列
            var liarr = [];
            for (var i = 0; i < lis.length; i++) {
                liarr.push(lis[i]);
            }
            console.log(liarr);
            // 2.新增事件
            btns[0].onclick = function () {
                // 3.如果按鈕是從大到小
                if (this.innerText == '從大到小') {
                    // 4.將li標籤按照從大到小的順序排列
                    liarr.sort(function (a, b) {
                        console.log(a, b);
                        // 6.獲取a、b中的span
                        var as = a.getElementsByTagName('span')[0].innerText;
                        var bs = b.getElementsByTagName('span')[0].innerText;
                        console.log(as, bs);
                        // 7.設定返回值
                        return bs - as;
                    });
                    // 9.更新文字
                    this.innerText = '從小到大'
                } else {
                    liarr.sort(function (a, b) {
                        console.log(a, b);
                        var as = a.getElementsByTagName('span')[0].innerText;
                        var bs = b.getElementsByTagName('span')[0].innerText;
                        return as - bs;
                    });
                    this.innerText = '從大到小'
                }
                // console.log(liarr);
                // 8.渲染到ul中
                // 8.1清空頁面中ul的內容
                ul.innerHTML = '';
                // 8.2.將liarr裡面的每一個資料渲染到頁面ul中
                for (var j = 0; j < liarr.length; j++) {
                    ul.innerHTML += '<li>' + liarr[j].innerHTML + '</li>';
                }
            }
            // 隨機排序
            btns[1].onclick = function () {
                liarr.sort(function (a, b) {
                    console.log(a, b);
                    return Math.random() - 0.5;
                });
                ul.innerHTML = '';
                for (var j = 0; j < liarr.length; j++) {
                    ul.innerHTML += '<li>' + liarr[j].innerHTML + '</li>';
                }
            }
</script>