js-css 多项筛选和排序

最新推荐文章于 2025-05-13 23:49:48 发布

Garon_InE

最新推荐文章于 2025-05-13 23:49:48 发布

阅读量1.5k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文详细探讨了如何使用JavaScript和CSS技术来实现网页中的多项筛选和排序功能。内容涵盖动态过滤列表、排序算法的实现以及用户体验优化等方面，为前端开发者提供了实用的技巧和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <select id="chooseLine">
            <option value="all" selected>全部状态</option>
            <option value="onLine">只要在线</option>
            <option value="offLine">只要离线</option>
        </select>
        <select id="chooseTable">
            <option value="all" selected>全部字母</option>
            <option value="a">只要a</option>
            <option value="b">只要b</option>
        </select>
        <select id="chooseKm">
            <option value="ASC" selected>近距离</option>
            <option value="DESC">远距离</option>
        </select>
        <div class="item-box">
            <div class="item off-line a">
                <input type="hidden" value="11" class="item-tag">
                <input type="hidden" value="10" class="item-km">
                <div>
                    离线的a，距离10km
                </div>
            </div>
            <div class="item on-line b">
                <input type="hidden" value="11" class="item-tag">
                <input type="hidden" value="7" class="item-km">
                <div>
                    在线的b，距离7km
                </div>
            </div>
            <div class="item on-line a">
                <input type="hidden" value="11" class="item-tag">
                <input type="hidden" value="12" class="item-km">
                <div>
                    在线的a，距离12km
                </div>
            </div>
            <div class="item off-line b">
                <input type="hidden" value="11" class="item-tag">
                <input type="hidden" value="5" class="item-km">
                <div>
                    离线的b，距离5km
                </div>
            </div>
        </div>
    </body>
    <script src="jquery.min.js"></script>
    <script>

        //选择在线离线
        $("#chooseLine").change(function()
        {
            var chooseLine_val = $("#chooseLine option:selected").val();

            //隐藏所有标签
            hideAllItem();

            //设置隐藏所有item
            $(".item-tag").each(function()
            {
              $(this).val("0"+$(this).val().slice(1,2));
            });

            //判断设置显示item
            if("onLine" == chooseLine_val)
            {
              $(".on-line").each(function()
              {
                $(this).find(".item-tag").val("1"+$(this).find(".item-tag").val().slice(1,2));
              });
            }
            else if("offLine" == chooseLine_val)
            {
              $(".off-line").each(function()
              {
                $(this).find(".item-tag").val("1"+$(this).find(".item-tag").val().slice(1,2));
              });
            }
            else
            {
                $(".item-tag").each(function()
                {
                  $(this).val("1"+$(this).val().slice(1,2));
                });
            }

            //显示相关item
            showSomeItem();
        });

        //选择标签
        $("#chooseTable").change(function()
        {
            var chooseTable_val = $("#chooseTable option:selected").val();

            //隐藏所有item
            hideAllItem();

            //设置隐藏所有item
            $(".item-tag").each(function()
            {
              $(this).val($(this).val().slice(0,1)+"0");
            });

            //判断设置显示item
            if("a" == chooseTable_val)
            {
              $(".a").each(function()
              {
                $(this).find(".item-tag").val($(this).find(".item-tag").val().slice(0,1)+"1");
              });
            }
            else if("b" == chooseTable_val)
            {
              $(".b").each(function()
              {
                $(this).find(".item-tag").val($(this).find(".item-tag").val().slice(0,1)+"1");
              });
            }
            else
            {
                $(".item-tag").each(function()
                {
                  $(this).val($(this).val().slice(0,1)+"1");
                });
            }

            //显示相关item
            showSomeItem();
        });

        //隐藏所有item
        function hideAllItem()
        {
          $(".item-tag").each(function()
          {
            $(this).parent().hide();
          });
        }

        //显示相关item
        function showSomeItem()
        {
          $(".item-tag").each(function()
          {
            if(-1 == $(this).val().indexOf("0"))
            {
              $(this).parent().show();
              $(this).parent().css("display","inline");
            }
          });
        }

        //选择km排序
        $("#chooseKm").change(function()
        {
            var chooseKm = $("#chooseKm option:selected").val();
            if("ASC" == chooseKm)
            {
              var item = $('.item').toArray().sort(function(a,b)
              {
                return parseInt($(a).find(".item-km").val()) - parseInt($(b).find(".item-km").val());
              });
            }
            else
            {
              var item = $('.item').toArray().sort(function(a,b)
              {
                return parseInt($(b).find(".item-km").val()) - parseInt($(a).find(".item-km").val());
              });
            }
            $(item).appendTo('.item-box');
        });
    </script>
</html>