如何用JS制作点击按钮可以完成图片排序的功能-群英

上一篇：用JS制作数字拼图难不难，要点是什么下一篇：this关键字的值取决什么，相关要点有哪些

今天这篇给大家分享的知识是“如何用JS制作点击按钮可以完成图片排序的功能”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“如何用JS制作点击按钮可以完成图片排序的功能”文章能帮助大家解决问题。

本文实例为大家分享了js点击按钮实现图片排序的具体代码，供大家参考，具体内容如下

效果

1 、点击按钮

如果按钮文字是从大到小将li标签按照从大到小的顺序排列文字改成从小到大

如果按钮文字是从小到大将li标签按照从小到大的顺序排列文字变成从大到小

2 、点击按钮将li随机排序

<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>

效果：

从小到大