js文字查询条件选择查询效果

<title>js实现类似京东的查询条件选择效果</title>
<style>
    div.condition{border:solid 1px #eee;}
    div.condition a{margin-right:10px}
    div.condition a.selected,div.condition a:hover{background:#0094ff;color:#fff;}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<form><input type="hidden" name="yy" /><input type="hidden" name="jy" /><input type="hidden" name="pt" />
<div class="condition" id="dvCondition">
    <div target="yy">精品应用：<a href="#" class="selected">所有</a><a href="#">1-2周岁</a><a href="#">2-3周岁</a><a href="#">3-4周岁</a>...更多a</div>
    <div target="jy">教育专题：<a href="#" class="selected">所有</a><a href="#">数学启蒙</a><a href="#">可续探索</a>...更多a</div>
    <div target="pt">下载平台：<a href="#" class="selected">所有</a><a href="#">Android</a><a href="#">iOS</a>...更多a</div>
    <div>已选条件：<label id="lSelected"></label></div>
</div>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
    $('#dvCondition a').click(function () {
        var selectedA = $(this).addClass('selected').siblings().removeClass('selected').closest('div.condition').find('a.selected');
        var f = selectedA.closest('form')[0];//表单
        var s = selectedA.map(function () {
            //设置对应的条件
            f[$(this).parent().attr('target')].value = this.innerHTML == '所有' ? '' : this.innerHTML;//如果你的条件查询值是数字id而不是文字，自己给a增加自定义属性如<a href="#" myid="11">..</a>，然后改为this.getAttribute('myid')||'';，所有那个项不需要添加myid属性
            return this.innerHTML == '所有' ? null : this.innerHTML;
        }).get().join('，');
        $('#lSelected').html(s);
        return false;
    });
</script>