1. 程式人生 > >商城專案總結(二)

商城專案總結(二)

1.關於比較流行的城市聯動外掛,這種基於jQuery的外掛有很多,我也是和大多數人一樣,網上下載一個直接用,可是遇到一個問題,就是對這玩意兒進行表單驗證,這種東西基本都是用span和div標籤模擬出來的,很難去用我熟悉的jQuery.validate.js,這就很二了,雖然簡單點的表單驗證很好寫,總不能前邊用jQuery.validate.js,後邊再為這玩意兒寫一個單獨的表單驗證,那這個世界還有什麼美好可言,畢竟我還是不想去寫一個表單驗證指令碼,我想了一個解決方案,因為jQuery.validate.js能驗證input標籤,不能驗證span標籤,所以寫一個透明的input,然後獲取到span的值給input,再用jQuery.validate.js去驗證,瞬間就覺得世界很美好了。具體實現如下:

     // 城市聯動外掛
     var $citypicker1 = $('#city-picker');
     //獲取地址函式
     function a() {
         var text = $(".select-item").text();
         //我用的是三級城市聯動,所以只要三個span標籤都出現立即取值
         if ($(".select-item").length >= 3) {
             $("#getVal").attr("value", text);
             //下邊有個詳細地址的填寫是向上依賴的,此處可忽略
$("#addressDetails").attr("disabled", false); } } //關於如何出發,簡單粗暴而且有用的方法就是設定定時器進行監聽 setInterval(a, 300);

2.還有一個東西是商品數量的選擇,涉及到加減功能(好像廢話的樣子),到數量到1時減按鈕失效,數量到99時加按鈕失效(我們專案設定的99),輸入框中只能輸入數字的正則,對輸入數字是99還是1時進行判斷,讓加減按鈕失效,不多說,貼程式碼:

    //加減按鈕效果
       //到1減按鈕失效,換樣式
    if (parseInt
($('.reduce').next().val()) == 1) { $('.reduce').attr('disabled', true); $('.reduce').addClass("reduce-disabled"); } //到99加按鈕失效,換樣式 if (parseInt($('.add').prev().val()) == 99) { $('.add').attr('disabled', true); $('.add').addClass("add-disabled"); } //數量增加操作 $(".add").click(function() { $(this).prev().val(parseInt($(this).prev().val()) + 1); if (parseInt($(this).prev().val()) != 1) { $('.reduce').attr('disabled', false); $('.reduce').removeClass("reduce-disabled"); } //到99加按鈕失效,換樣式 if (parseInt($(this).prev().val()) == 99) { $('.add').attr('disabled', true); $('.add').addClass("add-disabled"); } }); //數量減少操作 $(".reduce").click(function() { $(this).next().val(parseInt($(this).next().val()) - 1); //到1減按鈕失效,換樣式 if (parseInt($(this).next().val()) == 1) { $('.reduce').attr('disabled', true); $('.reduce').addClass("reduce-disabled"); } if (parseInt($(this).prev().val()) != 99) { $('.add').attr('disabled', false); $('.add').removeClass("add-disabled"); } }); //輸入框的監聽 $(".shopNum").keyup(function(){ //到99加按鈕失效,換樣式 if (parseInt($(this).val()) == 99) { $('.add').attr('disabled', true); $('.add').addClass("add-disabled"); } else{ $('.add').attr('disabled', false); $('.add').removeClass("add-disabled"); } //到1減按鈕失效,換樣式 if (parseInt($(this).val()) == 1) { $('.reduce').attr('disabled', true); $('.reduce').addClass("reduce-disabled"); } else{ $('.reduce').attr('disabled', false); $('.reduce').removeClass("reduce-disabled"); } //正則驗證,只能輸入兩位數字 $(this).val($(this).val().replace(/\D|^0/g,'')); }).bind("paste",function(){ $(this).val($(this).val().replace(/\D|^0/g,'')); });

好像沒提取公共的函式,看起來直觀最重要,當然開發完有寫東西優化一下還是很有必要的。