How2j仿写天猫前端学习笔记六 我的订单页面

这个页面交互也完成了，但是后面那个删除交互还没实现。因为这涉及到了后端，所以现在暂且不做。除了上面选择的是用div做的，从宝贝开始都是表格做的。不过，表格是一张表，下面每个商品内容也是单独的表做的，再用一个div把这些商品表包裹起来。

当点击上面的选项就会出现所对应的商品。上面的每个选项都是div，在设置成向左浮动就水平排列了。在每个选项都有orderStatus自定义属性，并且值都不一样。每张商品表也有对应的orderStatus属性。这样，只要当鼠标点击选项时，获取当前元素的orderStatus属性值。我把所有订单选项的值设为all，把取到的的值和**all **比较。只要相等就显示反之隐藏，并把选项表h和这个值相等的显示。

然后就是那个红色的下边框了，代表选中。先把原来的选中项的class移除掉。用的是$("div").removeClass("checkedDiv"),这句代码代表的是移除掉div的checkedDiv类，我原来还以为是直接删除这个div呢！再把当前元素选中，这里面加了个父div，这是因为我在css里设置选中的的是div里面的,而orderStatus是在a面的，完成！代码如下。

<script>
    $(function(){
        $("a[orderStatus]").click(function(){
            var orderStatus = $(this).attr("orderStatus");
            if ("all" == orderStatus){
                $("table[orderStatus]").show();
            }
            else{
                $("table[orderStatus]").hide();
                $("table[orderStatus = "+orderStatus+"]").show();
            }
            $("div").removeClass("checkedDiv");
            $("a[orderStatus = "+orderStatus+"]").parent("div").addClass("checkedDiv");
        })
    })
</script>