仿京东商城商品分类搜索功能

最新推荐文章于 2024-03-12 17:47:06 发布

小白变怪兽

最新推荐文章于 2024-03-12 17:47:06 发布

阅读量5k

点赞数 4

分类专栏： jQuery学习

本文链接：https://blog.csdn.net/u013558749/article/details/46401089

版权

jQuery学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最终实现效果如下图所示：

这里写图片描述

初步布局实现：

这里写图片描述

初步布局代码如下所示：

                         <div class="choose">
                            <ul class="content">
                                <li><span class="jiacu">企业规模</span> <span class="intro"><a href="javascript:;">微型 </a><a href="javascript:;">小型</a> <a href="javascript:;">大型</a> <a href="javascript:;">中型</a></span> </li>
                                <li><span class="jiacu">企业类型</span> <span class="intro"><a href="javascript:;">成熟</a> <a href="javascript:;">大集团</a><a href="javascript:;"> 初创</a> <a href="javascript:;">成长</a></span></li>

                            </ul>
                        </div>
                        <div class="con">
                            <ul>
                                <li class="chosed" id="chosed"><span>您已选择：</span>
                                        <span class="intro">

                                                    <span> </span>
                                                    <span> </span>
                                                    <span> </span>
                                                    <span> </span>
                                                    <span> </span>

                                        </span>
                                </li>
                              </ul>
                         </div>

2.jQuery效果实现代码如下(在引入此段代码之前记得要先将js的基础包引入，此处我用的是jquery-1.11.2.min.js)：

/*
     <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
*/
$(function () {
    $(".content .intro a").click(function () {

        // 获取最下面空的span
        var chosediterm = $(".chosed .intro");

        //匹配【li】并返回位置
        //$(this) 是指选中的a 标签对象
        var li_index = $(this).closest("li").index();//closest("li")获取祖先元素
        //给选中的a 标签的内容末尾加X
        var txt = $(this).text() + "<em>X</em>";

        //移除与选中标签同辈元素的class=selected
        // 属性，并设置字体颜色。最后为选中标签添加 class=selected
        //属性，并设置字体颜色
        //$(this).siblings().removeClass("selected").css("color", "#3366cc")/*.end()*/.addClass("selected").css("color", "red");
        $(this)/*.end()*/.addClass("selected").css("color", "red").siblings().removeClass("selected").css("color", "#3366cc");
        //把每个li里面的a插入到对应的span里面，这样同时解决了两个问题：修改选项同步，每个li只能有一个span
        chosediterm.find("span").eq(li_index).html(txt).css("display", "inline-block");
        //========================================
        // 通过点击 X 关闭span
        $(".chosed .intro em").click(function () {
            var index = $(this).parent("span").index();
            $("li:not('.chosed')").find(".intro a").removeClass("selected").css("color", "#3366cc");
            $(this).parent("span").empty().css("display", "none");
        });
        //当span的个数大于1就会出现clear按钮把所有的span都清除
        var len = chosediterm.find("span").has("em").length;
        //获取到用户选到的值，末尾带X
        var tags = chosediterm.find("span").text();
       $(".chosed .intro span em").css({
            "text-align": "center",
            "background": "#ff6600",
            "color": "#fff",
            "font-size": "14px",
            "font-weight": "bold",
            "font-style": "normal",
            "cursor": "pointer"
        });
        if (len > 2) {
            var clr = "<a href='javascript:;' class='clear' id='clear'>清除筛选条件</a>";
            $("#clear").remove();
            $(".chosed .intro").append(clr);
        }
        $(".clear").click(function () {
            $(".chosed .intro span").text("").css("display", "none");
            $("li:not('.chosed')").find(".intro a").removeClass("selected").css("color", "#3366cc");
            $(this).remove();
        });
    });
});