Js自定義多選效果

前端入坑紀(jì) 27

工作中的一個(gè)多選效果停局,感覺不算太難,就上傳來(lái)分享下广匙。

以上圖文允趟,純屬測(cè)試,如有雷同鸦致,請(qǐng)勿當(dāng)真

OK潮剪,first things first!項(xiàng)目鏈接

HTML 結(jié)構(gòu)
    <div id="selexWps" class="seletProds clear">
        <div>
            <span>積分<em>5000</em></span>
            ![](wrap/img/pic.png)
            <p>請(qǐng)選擇</p>
        </div>
        <div>
            <span>積分<em>5000</em></span>
            ![](wrap/img/pic.png)
            <p>請(qǐng)選擇</p>
        </div>
        <div>
            <span>積分<em>6000</em></span>
            ![](wrap/img/pic.png)
            <p>請(qǐng)選擇</p>
        </div>
        <div>
            <span>積分<em>7000</em></span>
            ![](wrap/img/pic.png)
            <p>請(qǐng)選擇</p>
        </div>
        <div>
            <span>積分<em>8000</em></span>
            ![](wrap/img/pic.png)
            <p>請(qǐng)選擇</p>
        </div>
        <div>
            <span>積分<em>9000</em></span>
            ![](wrap/img/pic.png)
            <p>請(qǐng)選擇</p>
        </div>
    </div>
    <div class="endBtnsWrp clear">
        <a class="endBtn" href="javascript:;">積分:<em id="talval">0</em></a>
        <a class="endBtn" href="javascript:;">結(jié)算</a>
    </div>

這真不曉得什么要特意說(shuō)明分唾,真要有的話抗碰,那底部的結(jié)算條,它是fixed 布局绽乔,固定在屏幕底部弧蝇。

CSS 結(jié)構(gòu)
        body {
            padding: 0;
            margin: 0;
            background-color: #fff;
            padding-bottom: 60px;
        }
        
        p {
            padding: 0;
            margin: 0;
        }
        
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: #525252;
        }
        
        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }
        
        .clear::after {
            display: block;
            content: "";
            clear: both;
        }
        
        .seletProds>div {
            float: left;
            position: relative;
            text-align: center;
            border: 2px solid #d8d8d8;
            box-sizing: border-box;
            width: 30%;
            margin: 1.666%;
        }
        
        .seletProds p {
            font-size: 14px;
            line-height: 37px;
            border-top: 2px solid #d8d8d8;
            text-align: center;
            background-color: #fff;
            color: #525252;
        }
        
        .seletProds>div img {
            width: 80%;
        }
        
        .seletProds>div span {
            position: absolute;
            top: 0;
            right: 0;
            background: rgba(255, 92, 92, 0.79);
            padding: 0 3px;
            color: #fff;
            height: 17px;
            font-size: 12px;
        }
        
        .seletProds>div span em,
        .endBtnsWrp a em {
            font-style: normal;
        }
        
        .seletProds>div.on p {
            color: #fff;
            background-image: linear-gradient(-90deg, #53a0fe 0%, #5063ed 100%);
        }
        
        .endBtnsWrp {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
        }
        
        .endBtn {
            display: block;
            float: left;
            width: 50%;
            line-height: 50px;
            font-size: 17px;
            color: #fff;
            background: #4a4a4a;
            text-align: center;
        }
        
        .endBtnsWrp a:first-child {
            background: #646464;
            width: 60%;
        }
        
        .endBtnsWrp a:last-child {
            background-color: #fcc647;
            width: 40%;
        }

css3的屬性用了不少,因?yàn)檫@個(gè)項(xiàng)目的出發(fā)點(diǎn)就是手機(jī)端的折砸。比如漸變背景看疗,偽元素等。每個(gè)商品是通過浮動(dòng)布局來(lái)實(shí)現(xiàn)的睦授。

JS 結(jié)構(gòu)
        var odivs = document.getElementById('selexWps').getElementsByTagName("div");
        var emTal = 0; //  這是總的積分?jǐn)?shù)两芳,初始為0
        for (var i = 0; i < odivs.length; i++) {
              //  先給每個(gè)點(diǎn)擊的項(xiàng)目添加個(gè)自定義屬性,以便區(qū)別點(diǎn)擊前和點(diǎn)擊后去枷,剛開始是off
            odivs[i].setAttribute("clickv", "off");
            odivs[i].onclick = function() {
               //  點(diǎn)擊時(shí)怖辆,先獲取里面的積分文字是复,轉(zhuǎn)成數(shù)字類型
                var themVal = Number(this.getElementsByTagName("em")[0].innerText);
                //  這里判斷未點(diǎn)擊的點(diǎn)擊后,要處理的操作
                if (this.getAttribute("clickv") == "off") {
                    emTal += themVal;
                    this.className = "on";
                    this.getElementsByTagName("p")[0].innerText = "已選擇";
                    this.setAttribute("clickv", "on");
                } else {
                  //  這里自然是已點(diǎn)擊過竖螃,再點(diǎn)擊的操作
                    emTal -= themVal;
                    this.className = "";
                    this.getElementsByTagName("p")[0].innerText = "請(qǐng)選擇";
                    this.setAttribute("clickv", "off");
                }
                 //  這里自然是把點(diǎn)完后淑廊,變更的最終積分?jǐn)?shù)添加到頁(yè)面的結(jié)算里
                document.getElementById("talval").innerText = emTal;
                //   console.log(emTal)
            }
        }

js 備注已添加,相對(duì)來(lái)說(shuō)還算詳細(xì)斑鼻,有興趣的小伙伴可以嘗試實(shí)驗(yàn)下。加油吧A攒<崛酢!

好了关摇,到此荒叶,本文告一段落!感謝您的閱讀输虱!祝你身體健康些楣,闔家幸福!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末宪睹,一起剝皮案震驚了整個(gè)濱河市愁茁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌亭病,老刑警劉巖鹅很,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異罪帖,居然都是意外死亡促煮,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門整袁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)菠齿,“玉大人,你說(shuō)我怎么就攤上這事坐昙∩龋” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵炸客,是天一觀的道長(zhǎng)襟士。 經(jīng)常有香客問我,道長(zhǎng)嚷量,這世上最難降的妖魔是什么鸟召? 我笑而不...
    開封第一講書人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任让禀,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己熔掺,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著痕囱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪暴匠。 梳的紋絲不亂的頭發(fā)上鞍恢,一...
    開封第一講書人閱讀 51,292評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音每窖,去河邊找鬼帮掉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛窒典,可吹牛的內(nèi)容都是我干的蟆炊。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼瀑志,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼涩搓!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起劈猪,我...
    開封第一講書人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤昧甘,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后战得,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體疾层,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年贡避,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了痛黎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡刮吧,死狀恐怖湖饱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情杀捻,我是刑警寧澤井厌,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站致讥,受9級(jí)特大地震影響仅仆,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜垢袱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一墓拜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧请契,春花似錦咳榜、人聲如沸夏醉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)畔柔。三九已至,卻和暖如春臣樱,著一層夾襖步出監(jiān)牢的瞬間靶擦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工雇毫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留玄捕,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓嘴拢,卻偏偏與公主長(zhǎng)得像桩盲,于是被迫代替她去往敵國(guó)和親寂纪。 傳聞我的和親對(duì)象是個(gè)殘疾皇子席吴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評(píng)論 1 92
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,099評(píng)論 25 707
  • 盡力地 把這個(gè)世界合理化
    4364閱讀 147評(píng)論 0 0
  • 作為淘品牌的三只松鼠搬设,如今的跨界業(yè)務(wù)進(jìn)行的有聲有色穴店,卓普科技拿出幾個(gè)舉例,例如:做潮牌拿穴,并且取名為——松鼠世界潮牌...
    暗月圣雪閱讀 783評(píng)論 0 1
  • 山路彎彎 流水點(diǎn)點(diǎn) 心情悵悵 路程遙遙 掀矗客戶理解 老板難當(dāng) 何年何月把帳清 未料 好話難話 任你稱道 就是無(wú)錢 ...
    小啟明星閱讀 181評(píng)論 2 3