How2j仿写天猫前端学习笔记三分类页面

今天写分类页面中排序和价格页面

排序价格页面

这个页面还算简单，上面的是图片，下面排序和价格是用两张table做的，没什么太大的难度。设置的table没有表框，是在每个td上加上一个边框。再把输入框的边框用 border-width; 0px,边框设置为无，就是想在这样了。

---

5.31日更新产品列表

产品列表

我记得原来好像写过类似的列表吧，都大同小异。不过这个当鼠标放在列表上时会有四个像素的红色边框出现。实现它就是套两个div ，如果套一个的话，会因为像素不够。往里面挤，造成抖动。

---

6.1日 0:27更新分类页面交互

分类页面交互
吧这两个页面结合在一起了，并且在输入框输入价格区间就可找到对应的商品。
先获取输入框的值，如果不是数字或小于0就改成一，并输出到输入框。再分别获取开始输入框和结束输入框的值，并判断他们同时为数字。把商品div隐藏，在用each()函数遍历所有商品。

再用attr()函数获取每个元素的price属性，这个属性为价格，和所在商品价格一样。把获取到的price属性转换为Number对象，new Number().没设这个时，当我在结束输入框输入1000时，没有数据。设置就没事了，不清楚这是怎么回事。然后把转换后的price和价格区间比较，满足条件的就显示。下图是查找符合条件的商品。

查找
下面是jquery代码。

<script>
        $(function(){
         $("input.press").keyup(function(){
            var num = $(this).val();
            if (num.length == 0)
            {
                $("div.div3").show();
                return;
            }
            num = parseInt(num);
            if (isNaN(num))
                num = 1;
            if (num <= 0)
                num = 1;
            $(this).val(num);
            var begin = $("input.beginpre").val();
            var end = $("input.endpre").val();
            if (!isNaN(begin) && !isNaN(end)){
                $("div.div3").hide();
                $("div.div3").each(function(){
                    
                    var price = $(this).attr("price");
                    price = new Number(price);
                    if (price <= end && price >= begin)
                        $(this).show();
                });
            }

         });
});
      
</script>