javascript - 想要创建一个在单击按钮时发生的排序功能

标签 javascript html css arrays button

我想在 javascript 中添加一个从高到低和从低到高的排序功能,当你点击我已经设置的相应按钮时,我已经找到了所有的过滤器功能,但是我在排序上遇到了困难。我提供了我当前代码的图片。

html

java

最佳答案

这就是你要找的吗?

<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>


  <script type="text/javascript">
    $(function(){

            var sort_by_name = function(a, b) {
                var aJObj = $(a);
                var bJObj = $(b);

                return aJObj.find(".img_value")[0].value.localeCompare(bJObj.find(".img_value")[0].value);
            }
            $("#hightolow").click(function(){
                var list = $("#sort_group > div").get();
                list.sort(sort_by_name);
                for (var i = 0; i < list.length; i++) {
                    list[i].parentNode.appendChild(list[i]);
                }
            });
            $("#lowtohigh").click(function(){
                var list = $("#sort_group > div").get();
                list.reverse(sort_by_name);
                for (var i = 0; i < list.length; i++) {
                    list[i].parentNode.appendChild(list[i]);
                }
            });
    })

  </script>
</head>
<body>
    <button id="hightolow">hightolow</button>
    <button id="lowtohigh">lowtohigh</button>
    <div id="sort_group" class="sort_group">
        <div><img class="1" alt="1"><input class="img_value" hidden value="1"/></div>
        <div><img class="2" alt="2"><input class="img_value" hidden value="2"/></div>
        <div><img class="4" alt="4"><input class="img_value" hidden value="4"/></div>
        <div><img class="3" alt="3"><input class="img_value" hidden value="3"/></div>
        <div><img class="5" alt="5"><input class="img_value" hidden value="5"/></div>
        <div><img class="6" alt="6"><input class="img_value" hidden value="6"/></div>
    </div>
</body>
</html>

关于javascript - 想要创建一个在单击按钮时发生的排序功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40814537/

相关文章:

javascript - Angular Directive(指令) : How to control when chart is rendered

javascript - 每 30 秒运行一次 ajax 并显示倒数计时器

javascript - 将三元运算符转换为 if

html - 特定位置的子菜单

HTML 表单字段标签在没有说明的情况下在 MS-Edge 上设置为 100% 宽度?

javascript - 下载动态创建的 zip 存档的 Angular 解决方案

html - 有没有办法让 3 个表单元素排在一行?

javascript - 使 Intro.js 工具提示响应

html - Css 在末尾添加 3 个点

css - 通过具有悬停属性的CSS更改asp.net中链接按钮的字体颜色