JQ实现仿淘宝条件筛选
首先看下效果:
Js代码:
<script type="text/javascript"> $(".search_qxxx > ul > li > a").click(function () { if ($(this).attr("class") != "text_ce5a11") { if (typeof ($("#soKeyWords").find("#" + $(this).parents().find(".text_ce5a11").attr("id")).html()) != 'undefined') { // 当前分类已选条件, 覆盖已有内容 if ($(this).parent().siblings("li").andSelf().find("a").first()[0].innerHTML == $(this).parent().siblings("li").andSelf().find("a").first().context.innerHTML) { // 如果选择的是不限,则应该把下面的该类型中的条件删除。 $("#soKeyWords").find("#" + $(this).parents().find(".text_ce5a11").attr("id")).detach(); $(this).addClass("text_ce5a11").parent().siblings("li").find("a").removeClass("text_ce5a11"); } $("#soKeyWords").find("#" + $(this).parents().find(".text_ce5a11").attr("id")).html("" + $(this).html() + " <a href='javascript:void(0);'>×</a>").attr("id", $(this).attr("id")); } else { if ($("#soKeyWords .option").size() == 0) { $("#soKeyWords").html("<span class='option' id='" + $(this).attr("id") + "'>" + $(this).html() + " <a href='javascript:void(0);'>×</a></span>"); } else { $("#soKeyWords").append("<span class='option' id='" + $(this).attr("id") + "'>" + $(this).html() + " <a href='javascript:void(0);'>×</a></span>"); } } $(this).addClass("text_ce5a11").parent().siblings("li").find("a").removeClass("text_ce5a11"); return false; } return false; }); $("#soKeyWords > span > a").live("click", function () { $(this).parent().detach(); $(".search_qxxx > ul > li").find("#" + $(this).parent().attr("id")).removeClass("text_ce5a11").parent().siblings("li").andSelf().find("a").first().addClass("text_ce5a11"); }); </script>
作者:http://www.guolingfa.cn
出处:http://www.guolingfa.cn
关于作者:初出茅庐。如有问题或建议,请多多赐教!
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
如有问题,可以通过guo@guolingfa.cn 联系我,非常感谢。