商城项目总结（二）

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,''));
    });

好像没提取公共的函数，看起来直观最重要，当然开发完有写东西优化一下还是很有必要的。