How2j仿寫天貓前端學(xué)習(xí)筆記六 我的訂單頁面

我的訂單

這個(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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市疹娶,隨后出現(xiàn)的幾起案子伴栓,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钳垮,死亡現(xiàn)場(chǎng)離奇詭異惑淳,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)饺窿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門歧焦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人肚医,你說我怎么就攤上這事绢馍。” “怎么了肠套?”我有些...
    開封第一講書人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵舰涌,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我糠排,道長(zhǎng)舵稠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任入宦,我火速辦了婚禮哺徊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘乾闰。我一直安慰自己落追,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開白布涯肩。 她就那樣靜靜地躺著轿钠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪病苗。 梳的紋絲不亂的頭發(fā)上疗垛,一...
    開封第一講書人閱讀 52,874評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音硫朦,去河邊找鬼贷腕。 笑死,一個(gè)胖子當(dāng)著我的面吹牛咬展,可吹牛的內(nèi)容都是我干的泽裳。 我是一名探鬼主播,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼破婆,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼涮总!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起祷舀,我...
    開封第一講書人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤瀑梗,失蹤者是張志新(化名)和其女友劉穎烹笔,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體夺克,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡箕宙,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了铺纽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柬帕。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖狡门,靈堂內(nèi)的尸體忽然破棺而出陷寝,到底是詐尸還是另有隱情,我是刑警寧澤其馏,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布凤跑,位于F島的核電站,受9級(jí)特大地震影響叛复,放射性物質(zhì)發(fā)生泄漏仔引。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一褐奥、第九天 我趴在偏房一處隱蔽的房頂上張望咖耘。 院中可真熱鬧,春花似錦撬码、人聲如沸儿倒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽夫否。三九已至,卻和暖如春叫胁,著一層夾襖步出監(jiān)牢的瞬間凰慈,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來泰國(guó)打工驼鹅, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留微谓,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓谤民,卻偏偏與公主長(zhǎng)得像堰酿,于是被迫代替她去往敵國(guó)和親疾宏。 傳聞我的和親對(duì)象是個(gè)殘疾皇子张足,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對(duì)...
    cosWriter閱讀 11,113評(píng)論 1 32
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)坎藐,斷路器为牍,智...
    卡卡羅2017閱讀 134,722評(píng)論 18 139
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的哼绑,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,911評(píng)論 0 0
  • 在姥姥身邊的時(shí)光很慢…… 小時(shí)候碉咆,姥姥頭上已經(jīng)長(zhǎng)了許多白頭發(fā)抖韩,每當(dāng)姥姥忙完,我就會(huì)主動(dòng)給姥姥搬個(gè)小板凳休息...
    月光明媚閱讀 364評(píng)論 1 6
  • 日程安排 公元20180305 禮拜一 24H24H記錄 - [ ] 早起01 - [ ] 健身02 - [ ]...
    上帝的誓言閱讀 56評(píng)論 0 0