js实现点击按钮使图片排序

梦里梦外; 2022-09-11 15:27 319阅读 0赞

效果

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>

效果：

从小到大

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

从大到小

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

随机排序

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/592799fb112a48509d9e3fa8f6b3bf00.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/7b5af8c1d9c34ed4838ea75c00ac25b7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/dace72d985fc4fe09b274a3426ce9a37.png

发表评论取消回复

表情：

评论列表（有 0 条评论，319人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现点击隐藏图片

方法一：把图片的display设为none，触发点击事件时，display变为block <style> img { wi

古城微笑少年丶/ 2023年06月05日 08:08/ 0 赞/ 38 阅读

相关 js 实现点击按钮复制文本

原理：浏览器提供了 copy 命令，可以复制选中的内容 document.execCommand("copy") 可以通过 select() 方法，选中输

素颜马尾好姑娘i/ 2023年02月13日 08:59/ 0 赞/ 29 阅读

相关原生 js 实现点击按钮复制文本

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容，原以为差不多，结果发现根本行不通尝试了各种办法，最后使了个障眼法，实现了下面

柔光的暖阳◎/ 2023年01月21日 04:29/ 0 赞/ 166 阅读

相关 js实现点击按钮使图片排序

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

梦里梦外;/ 2022年09月11日 15:27/ 0 赞/ 320 阅读

相关 js实现点击按钮复制文本功能

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容，原以为差不多，结果发现根本行不通尝试了各种办法，最后使了个障眼法，实现了下面

女爷i/ 2022年08月28日 06:59/ 0 赞/ 303 阅读

相关用 JS 点击左右按钮使图片切换 - 最精简版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

蔚落/ 2022年08月11日 05:29/ 0 赞/ 210 阅读

相关 js 实现点击按钮

需求说明有时候为了更好的用户体验，我们需要js来实现点击按钮的操作 -------------------- html代码 <button type="

你的名字/ 2022年02月20日 08:55/ 0 赞/ 964 阅读

相关 JS实现点击按钮切换sheet页

1.需求描述有的时候我们想实现上一页、下一页或跳转到指定sheet页。效果如下 ![http://help.finereport.com/uploads/201

左手的ㄟ右手/ 2022年02月02日 01:59/ 0 赞/ 437 阅读

相关 js点击按钮实现全屏效果

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

旧城等待，/ 2022年01月19日 03:34/ 0 赞/ 708 阅读

相关原生js点击按钮切换图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态切换图片</

谁借莪１个温暖的怀抱￠/ 2022年01月05日 11:27/ 0 赞/ 440 阅读