jq仿京东商城多条件筛选特效

作者:Jasmine - 2016年01月07日

效果展示:

代码:

<div id="filter">
  <dl>
    <dt>品牌:</dt>
    <dd>
      <div><a>全部</a></div>
    </dd>
    <dd>
      <div><a>惠普(hp)</a></div>
    </dd>
    <dd>
      <div><a>联想(Lenovo)</a></div>
    </dd>
    <dd>
      <div><a>联想(ThinkPad)</a></div>
    </dd>
    <dd>
      <div><a>宏基(acer)</a></div>
    </dd>
    <dd>
      <div><a>华硕</a></div>
    </dd>
    <dd>
      <div><a>戴尔</a></div>
    </dd>
    <dd>
      <div><a>三星</a></div>
    </dd>
    <dd>
      <div><a>索尼</a></div>
    </dd>
    <dd>
      <div><a>东芝</a></div>
    </dd>
    <dd>
      <div><a>Gateway</a></div>
    </dd>
    <dd>
      <div><a>微星</a></div>
    </dd>
    <dd>
      <div><a>海尔</a></div>
    </dd>
    <dd>
      <div><a>清华同方</a></div>
    </dd>
    <dd>
      <div><a>富士通</a></div>
    </dd>
    <dd>
      <div><a>苹果(Apple)</a></div>
    </dd>
    <dd>
      <div><a>神舟</a></div>
    </dd>
    <dd>
      <div><a>方正</a></div>
    </dd>
    <dd>
      <div><a>优雅</a></div>
    </dd>
  </dl>
  <dl>
    <dt>价格:</dt>
    <dd>
      <div><a>全部</a></div>
    </dd>
    <dd>
      <div><a>1000-2999</a></div>
    </dd>
    <dd>
      <div><a>3000-3499</a></div>
    </dd>
    <dd>
      <div><a>3500-3999</a></div>
    </dd>
    <dd>
      <div><a>4000-4499</a></div>
    </dd>
    <dd>
      <div><a>4500-4999</a></div>
    </dd>
    <dd>
      <div><a>5000-5999</a></div>
    </dd>
    <dd>
      <div><a>6000-6999</a></div>
    </dd>
    <dd>
      <div><a>7000-9999</a></div>
    </dd>
    <dd>
      <div><a>10000以上</a></div>
    </dd>
  </dl>
  <dl>
    <dt>尺寸:</dt>
    <dd>
      <div><a>全部</a></div>
    </dd>
    <dd>
      <div><a>8.9英寸及以下</a></div>
    </dd>
    <dd>
      <div><a>11英寸</a></div>
    </dd>
    <dd>
      <div><a>12英寸</a></div>
    </dd>
    <dd>
      <div><a>13英寸</a></div>
    </dd>
    <dd>
      <div><a>14英寸</a></div>
    </dd>
    <dd>
      <div><a>15英寸</a></div>
    </dd>
    <dd>
      <div><a>16英寸-17英寸</a></div>
    </dd>
  </dl>
  <dl>
    <dt>平台:</dt>
    <dd>
      <div><a>全部</a></div>
    </dd>
    <dd>
      <div><a>AMD Brazos APU平台</a></div>
    </dd>
    <dd>
      <div><a>Intel Sandy Bridge平台</a></div>
    </dd>
    <dd>
      <div><a>Intel平台</a></div>
    </dd>
    <dd>
      <div><a>AMD平台</a></div>
    </dd>
  </dl>
  <dl>
    <dt>显卡:</dt>
    <dd>
      <div><a>全部</a></div>
    </dd>
    <dd>
      <div><a>独立显卡</a></div>
    </dd>
    <dd>
      <div><a>集成显卡</a></div>
    </dd>
    <dd>
      <div><a>核芯显卡</a></div>
    </dd>
  </dl>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //选中filter下的所有a标签,为其添加hover方法,该方法有两个参数,分别是鼠标移上和移开所执行的函数。
        $("#filter a").hover(
            function () {
                $(this).addClass("seling");
            },
            function () {
                $(this).removeClass("seling");
            }
        );
 
 
        //选中filter下所有的dt标签,并且为dt标签后面的第一个dd标签下的a标签添加样式seled。(感叹jquery的强大)
        $("#filter dt+dd a").attr("class", "seled"); /*注意:这儿应该是设置(attr)样式,而不是添加样式(addClass),
                                                      不然后面通过$("#filter a[class='seled']")访问不到class样式为seled的a标签。*/       
 
        //为filter下的所有a标签添加单击事件
        $("#filter a").click(function () {
            $(this).parents("dl").children("dd").each(function () {
                //$(this).children("div").children("a").removeClass("seled");
				$(this).find("a").removeClass("seled");
            });
 
            $(this).attr("class", "seled");
 
        });
    });
 
    function RetSelecteds() {
        var result = "";
        $("#filter a[class='seled']").each(function () {
            result += $(this).html()+"\n";
        });
        return result;
    }
</script>
#filter { width: 620px; height: auto; margin-left: auto; margin-right: auto; font-size: 12px; }
#filter dl { padding: 0; margin-top: 0; margin-bottom: 0; clear: both; padding: 4px 0; }
#filter dt, dd { display: block; float: left; width: auto; padding: 0; margin: 3px 0; }
#filter dt { height: 14px; padding-bottom: 4px; font-weight: bold; color: #333333; }
#filter dd { color: #005AA0; margin-right: 8px; }
#filter a { cursor: pointer; padding:4px; }
.seling { background-color: #005AA0; color: #FFFFFF;padding:4px; }
.seled { background-color: #005AA0; color: #FFFFFF;padding:4px; }

对jquery体会最深的一点是,可以通过很多种方法达到同样的显示效果,但是本质却有着非常大的区别。例如:

通过".attr('class', 'seled')"和".addClass('seled')"都可以为选中的对象添加样式,并且达到同样的显示效果,但是这两种添加样式的方法在"$("#filter a[class='seled']")"眼中却是不一样的。


本文作者: Jasmine

本文链接: https://www.jianbaizhan.com/article/343.html

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!