js点击按钮实现图片排序

本文实例为大家分享了js点击按钮实现图片排序的具体代码，供大家参考，具体内容如下
效果
1 、点击按钮
如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成从小到大
如果按钮文字是从小到大 将li标签按照从小到大的顺序排列 文字变成从大到小
2 、点击按钮 将li随机排序

1. <style>
2.     * {
3.       padding: 0;
4.       margin: 0;
5.       list-style: none;
6.     }
8.     .wrap {
9.       width: 440px;
10.       margin: 50px auto;
11.       text-align: center;
12.     }
14.     ul li {
15.       float: left;
16.       width: 100px;
17.       height: 130px;
18.       margin-right: 10px;
19.       margin-bottom: 10px;
20.       font-size: 12px;
21.     }
23.     ul li img {
24.       width: 100px;
25.       height: 100px;
26.     }
28.     ul li p {
29.       line-height: 30px;
30.       text-align: center;
31.       font-size: 12px;
32.     }
34.     .wrap button {
35.       display: inline-block;
36.       width: 100px;
37.       height: 40px;
38.       text-align: center;
39.       line-height: 40px;
40.       background-color: red;
41.       border: none;
42.       margin-right: 20px;
43.       margin-bottom: 20px;
44.       color: #fff;
45.       font-size: 16px;
46.     }
47. </style>

复制代码

1. <div class="wrap">
2.     <button>从大到小</button><button>随机排序</button>
3.     <ul>
4.       <li>
5.         <img src="./img1.jfif" alt="">
6.         柴犬<span>1</span>
7.       </li>
8.       <li>
9.         <img src="./img2.jfif" alt="">
10.         柴犬<span>2</span>
11.       </li>
12.       <li>
13.         <img src="./img3.jfif" alt="">
14.         柴犬<span>3</span>
15.       </li>
16.       <li>
17.         <img src="./img4.jfif" alt="">
18.         柴犬<span>4</span>
19.       </li>
20.       <li>
21.         <img src="./img5.jfif" alt="">
22.         柴犬<span>5</span>
23.       </li>
24.       <li>
25.         <img src="./img6.jfif" alt="">
26.         柴犬<span>6</span>
27.       </li>
28.       <li>
29.         <img src="./img7.jfif" alt="">
30.         柴犬<span>7</span>
31.       </li>
32.       <li>
33.         <img src="./img8.jfif" alt="">
34.         柴犬<span>8</span>
35.    </li>
36. </ul>

复制代码

1. <script>
2.       /*
3.          2. 效果
4.             2.1 点击按钮
5.               如果按钮文字是从大到小 将li标签按照从大到小的顺序排列 文字改成从小到大
6.               如果按钮文字是从小到大 将li标签按照从小到大的顺序排列 文字变成从大到小
7.             2.2 点击按钮 将li随机排序
8.           标签排序比较快
9.           注意:
10.             获取元素方式:
11.               document/父元素.getElementsByTagName()
12.               document/父元素.getElementsByClassName()
13.               */
14.       // 1.获取元素 button li ul
15.       var btns = document.getElementsByTagName('button');
16.       var lis = document.getElementsByTagName('li');
17.       var ul = document.getElementsByTagName('ul')[0];
18.       console.log(btns, lis, ul);
20.       // 5.将集合转成数组
21.       var liarr = [];
22.       for (var i = 0; i < lis.length; i++) {
23.         liarr.push(lis[i]);
24.       }
25.       console.log(liarr);
26.       // 2.添加事件
27.       btns[0].onclick = function () {
28.         // 3.如果按钮是从大到小
29.         if (this.innerText == '从大到小') {
30.           // 4.将li标签按照从大到小的顺序排列
31.           liarr.sort(function (a, b) {
32.             console.log(a, b);
33.             // 6.获取a、b中的span
34.             var as = a.getElementsByTagName('span')[0].innerText;
35.             var bs = b.getElementsByTagName('span')[0].innerText;
36.             console.log(as, bs);
37.             // 7.设置返回值
38.             return bs - as;
39.           });
40.           // 9.更新文字
41.           this.innerText = '从小到大'
42.         } else {
43.           liarr.sort(function (a, b) {
44.             console.log(a, b);
45.             var as = a.getElementsByTagName('span')[0].innerText;
46.             var bs = b.getElementsByTagName('span')[0].innerText;
47.             return as - bs;
48.           });
49.           this.innerText = '从大到小'
50.         }
51.         // console.log(liarr);
52.         // 8.渲染到ul中
53.         // 8.1清空页面中ul的内容
54.         ul.innerHTML = '';
55.         // 8.2.将liarr里面的每一个数据渲染到页面ul中
56.         for (var j = 0; j < liarr.length; j++) {
57.           ul.innerHTML += '<li>' + liarr[j].innerHTML + '</li>';
58.         }
59.       }
60.       // 随机排序
61.       btns[1].onclick = function () {
62.         liarr.sort(function (a, b) {
63.           console.log(a, b);
64.           return Math.random() - 0.5;
65.         });
66.         ul.innerHTML = '';
67.         for (var j = 0; j < liarr.length; j++) {
68.           ul.innerHTML += '<li>' + liarr[j].innerHTML + '</li>';
69.         }
70.       }
71. </script>

复制代码

效果：
从小到大

从大到小

随机排序

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。