如何用JavaScript点击按钮实现图片按长尾词排序功能？

本文共计939个文字，预计阅读时间需要4分钟。

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

效果：1、点击按钮、点击按钮+、如果按钮文字是从大到小+、将li标签按照从大到小的顺序排列+、文字变成从大到小

修改后内容：本例分享js点击按钮实现图片排序的代码，供参考。具体如下：

效果：1、点击按钮、点击按钮、按钮文字从大到小、li标签顺序从大到小、文字从大到小排序

本文实例为大家分享了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>

效果：

从小到大

从大到小

随机排序

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。