javascript - JQ的两段代码方法一样,元素不一样,如何简化代码
PHP中文网
PHP中文网 2017-04-11 11:04:13
[JavaScript讨论组]
       

$("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'); } });

本人新手,请不要给负分哦~

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(4)
大家讲道理
$("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结构。

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

多看文档。

伊谢尔伦

最好把事件委托给document 这样在input后续插入时依然有效
大概可以修改成这样吧!试试看

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

这样试试

$("input[name='mobile'],input[name='codep']").on('input propertychange',function(){
    var v = $(this).val(), _v = $(this).attr('name');
    var _class = (_v == 'mobile')?$('.btn-stepa'):$('.btn-stepb');
    if(v!=""){
        _class.removeAttr("disabled").css('background','#6f60cf');               
    }else{
        _class.attr('disabled',"disabled").css('background','#a396f7');               
    }
});
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号