开发者社区 问答 正文

JQ的两段代码方法一样,元素不一样,如何简化代码

       <div class="innercontent innercontent-a">
             <div class="wrap-usermobile">
                 <label class="user-info">账 户</label>
                 <input type="tel" name="mobile" maxlength="11" value="" >
            </div>
            <div class="submit-btn">                        
                  <button type="button"  class="btn-stepa" >下一步</button>
            </div>
    </div>
    
    <div class="innercontent innercontent-b" >                
         <div class="wrap-codep">
             <label class="user-info">验证码</label>
             <input type="text" name="codep" >                        
         </div>
        <div class="submit-btn">                        
             <button type="button"  class="btn-stepb">下一步</button>
        </div>
    </div>

  $("input[name='mobile']").on('input propertychange',function(){
           var mobile = $(this).val();
          if(mobile!=""){
                     $(".btn-stepa").removeAttr("disabled").css('background','#6f60cf');               
                   }
               else{
                   $(".btn-stepa").attr('disabled',"disabled").css('background','#a396f7');               
                }
       });
       
      $("input[name='codep']").on('input propertychange',function(){
           var codep = $(this).val();
           if(codep!=""){
                     $(".btn-stepb").removeAttr("disabled").css('background','#6f60cf');               
                   }
               else{
                   $(".btn-stepb").attr('disabled',"disabled").css('background','#a396f7');               
                }
        });

展开
收起
杨冬芳 2016-06-23 14:57:58 2052 分享 版权
1 条回答
写回答
取消 提交回答
  • IT从业
    $("input[name='mobile'],input[name='codep']").on('input propertychange',function(){
       var $this = $(this),
           val = $this.val(),
           $btn = $this.closest(".innercontent").find("button"); //这里的button标签最好有个类名来限制一下,比如button.btn-step,不然如果有多个button标签就会有问题。
       if(val!=""){
             $btn.prop('disabled',false).css('background','#6f60cf');               
       }else{
           $btn.prop('disabled',true).css('background','#a396f7');               
        }
    });

    attr和prop的用法是不同的,你可以看看jquery的官方文档有解释英文版,这是中文版。

    关于你在答案一种的评论,你的这个.btn-stepa和.btn-stepb是可以优化的,前提是你让我看一下你的html结构。

    2019-07-17 19:46:20
    赞同 展开评论
问答分类:
问答地址: