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

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

1. 初步布局实现：

初步布局代码如下所示：

                         <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();
        });
    });
});

此文为 《一起学编程 》原创内容，特此声明