<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 () {
console.log($(this).parent().attr('target'))
//设置对应的条件
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;
});
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。