商城專案總結(二)
阿新 • • 發佈:2019-01-08
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,''));
});
好像沒提取公共的函式,看起來直觀最重要,當然開發完有寫東西優化一下還是很有必要的。