jQuery實現淘寶購物車小組件
阿新 • • 發佈：2019-03-27
this poi con relative 探討 func isn ddc 都是
我愛擼碼，擼碼使我感到快樂!
大家好，我是Counter，本章將實現淘寶購物車小組件，
用原生js可以實現嗎，當然可以，可是就是任性一回，就是想用jQuery
來實現下。HTML代碼不多才4行，CSS樣式也不多，主要是功能，你要是能在裏面輸入除了0~20的整數，
算我輸，嘿嘿。主要需求就是購物車裏的商品可以是0到20件，少了不行，多了裝不下，就是這樣。(記得如果有bug就留
言我哦，我快馬加鞭改bug，不過不能有bug，自信。。。)
效果如下：
主要是jQuery部分，每一行都有詳細註釋，歡迎一起探討技術，一起成長。
( 在這邊我用的jQuery是在線引入方式，大家可以去jQuery官網下載下來，離線引入的方式，都可以。
代碼給出：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘寶購物車組件</title> <!-- CSS樣式 --> <style> .cart { position: relative; width: 110px; height: 30px; /* border: 1px solid black; */ font-size: 0; } span { display: inline-block; width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 16px; background-color: #ededed; cursor: pointer; user-select: none; } input { position: absolute; top: 0; left: 30px; box-sizing: border-box; width: 50px; height: 30px; text-align: center; z-index: 999; } .cart span:nth-of-type(2) { position: absolute; right: 0; top: 0; } .cart .limit { background-color: #888; } </style> </head> <body> <div class="cart"> <span class="reduce">-</span> <input type="text" value="0"> <span class="plus">+</span> </div> <!-- 這邊已經在線引入了，所有這個本地文件註釋了 --> <!-- <script src="../jquery-3.3.1.js"></script> --> <!-- jQuery代碼 --> <script> // 設置初始購物車商品數量值 var val = 0; // 給input標簽綁定“input”事件，切記這邊不綁定keydown事件，這個事件響應慢半拍，意味著在input中你輸入1，它給你返回空，你再輸入2，它給你返回1，因為它綁定的是鍵盤按下的那一瞬間，那個時候value值為空 $(‘input‘).on("input", function () { // 每次觸發input事件，就執行cont函數，並傳入0，這邊的0並沒有起到什麽作用，知識為了傳參而傳參，是為了更好的配合，點擊+或者點擊-的事件 cont(0); // 當手動輸入數字時，這邊也需要進行一次判斷，及時設置上相對應的不可點擊背景色 lim(); }) // 設置lim函數，用於判定邊界閾值，來確定不可點擊的區域背景色 function lim() { // console.log(‘觸發‘); // 當輸入框裏為0時，那麽-的區域顏色就變深（給這個元素增加class名，class名在css中已經提前設定好顏色了，下面同理） if (val === 0 ) { $(‘.reduce‘).addClass(‘limit‘); } // 當輸入框為20時，那麽+的區域顏色就變深 else if (val === 20) { $(‘.plus‘).addClass(‘limit‘); } else { // 如果輸入框裏的值都不為0 或者 20 那麽意味著，這兩個區域都是可以再次點擊的，所以移除這個class名 $(‘.limit‘).removeClass(‘limit‘); } } // 當頁面刷新時，就執行一次lim函數，確保0區域顏色深 lim(); // 每次觸發input事件，都將觸發cont函數 function cont(num) { // parseInt("2i") 會返回2，parseInt會盡可能的返回首部整數，其他位置不生效，意味著在原有的基礎上，parseInt都將返回整數。所以這裏如果款內原本為2的話，那麽將不會進入第一個判斷區，款裏什麽值，還是什麽值。 val = parseInt($(‘input‘).val()) + num; // 如果val小於0，或者不是一個數的話那麽就讓val等於0，下面同理。 前面都說了，這邊的基礎上parseInt()返回都為整數，那麽這邊為什麽要來個判讀是不是一個數呢，因為這邊如果把款裏的數值用鍵盤的刪除鍵刪除的話，那麽val將會是一個NaN，切記 if (val <= 0 || isNaN(val)) { val = 0 } else if ( val >= 20 ) { val = 20; } // 關鍵一步，設置款裏的這個值為val $(‘input‘).val(val); } // 給-和+綁定點擊事件 $(".reduce").add(".plus").on("click", function () { // 判定當前點擊的jQuery對象是不是-所在的元素，如果是的話那麽執行cont函數，並且傳入參數-1，代表用戶點擊了減1，下面反之。 if ( $(this).hasClass(‘reduce‘) ) { cont(-1); } else { cont(1); } // 每次點擊都要進行一次判定，判定當前的val是否到達閾值，並且改變背景顏色。 lim(); }) </script> </body> </html>
jQuery實現淘寶購物車小組件