我的訂單

這個(gè)頁面交互也完成了，但是后面那個(gè)刪除交互還沒實(shí)現(xiàn)。因?yàn)檫@涉及到了后端，所以現(xiàn)在暫且不做。除了上面選擇的是用div做的，從寶貝開始都是表格做的。不過，表格是一張表，下面每個(gè)商品內(nèi)容也是單獨(dú)的表做的，再用一個(gè)div把這些商品表包裹起來。

當(dāng)點(diǎn)擊上面的選項(xiàng)就會(huì)出現(xiàn)所對(duì)應(yīng)的商品。上面的每個(gè)選項(xiàng)都是div，在設(shè)置成向左浮動(dòng)就水平排列了。在每個(gè)選項(xiàng)都有orderStatus自定義屬性，并且值都不一樣。每張商品表也有對(duì)應(yīng)的orderStatus屬性。這樣，只要當(dāng)鼠標(biāo)點(diǎn)擊選項(xiàng)時(shí)，獲取當(dāng)前元素的orderStatus屬性值。我把所有訂單選項(xiàng)的值設(shè)為all，把取到的的值和**all **比較。只要相等就顯示反之隱藏，并把選項(xiàng)表h和這個(gè)值相等的顯示。

然后就是那個(gè)紅色的下邊框了，代表選中。先把原來的選中項(xiàng)的class移除掉。用的是$("div").removeClass("checkedDiv"),這句代碼代表的是移除掉div的checkedDiv類，我原來還以為是直接刪除這個(gè)div呢！再把當(dāng)前元素選中，這里面加了個(gè)父div，這是因?yàn)槲以赾ss里設(shè)置選中的的是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>