关于自己学习中踩得坑

本贴最后更新于 1867 天前,其中的信息可能已经渤澥桑田

分享自己学习中遇到的一些问题

当然由于博主学习尚浅所以有些问题可能在一些大佬看起来很简单,但怎么说小白也是一步步成长起来的,而且一下坑没有什么顺序可言遇到就分享了,不喜勿喷;
无意中进去按钮禁用问题

在日常开发中我们也会碰到关于按钮禁用的问题,而我这个问题发生的原因是我在进行项目后台管理系统的登录页面时突发奇想,想给在通过正常的 Ajax 验证之后,根据返回的信息的正误,进行统计若错误次数超过五次的话把登录按钮进行禁用。

//这是最终正确的代码
  $.ajax({

        url: '验证接口',

  

        type: 'post',

        data: {

          user_name: username,

          password: password

        },

        success: function(res) {

          // 若验证成功则跳转到主页面

  

          if (res.code == 200) {

            location.href = 'index.html';

  
  

          } else {

            shiBai++;

            if (shiBai == 5) {

              shiBai = 0;

              alert('抱歉您已输入错误五次,请五秒后再试');

              var shiJian = 5

              $('.input_sub').prop('disabled', true);

  

              var timeOut = setInterval(function() {

                shiJian--;

                if (shiJian == 0) {

                  $('.input_sub').prop('disabled', false);

                  clearInterval(timeOut);

                  return;

                }

  

              }, 1000);

              return;

            }

            var str = '抱歉用户名或者密码输入错误请您查正后在输入,已失败' + shiBai + '次';

            alert(str);

          }
        }
      })
    })

但是一顿噼里啪啦的敲击之下基本已经实现但是,进行测试的时候发现禁用后按钮居然无法恢复了。很是奇怪

//错误代码示范
 success: function(res) {

          // 若验证成功则跳转到主页面

  

          if (res.code == 200) {

            location.href = 'index.html';

  
  

          } else {

            shiBai++;

            if (shiBai == 5) {

              shiBai = 0;

              alert('抱歉您已输入错误五次,请五秒后再试');

              var shiJian = 5
//此处错误
              $('.input_sub').attr('disabled', 'true');

  

              var timeOut = setInterval(function() {

                shiJian--;

                if (shiJian == 0) {
//此处错误
                  $('.input_sub').attr('disabled', 'false');

                  clearInterval(timeOut);

                  return;

                }

  

              }, 1000);

              return;

            }

            var str = '抱歉用户名或者密码输入错误请您查正后在输入,已失败' + shiBai + '次';

            alert(str);

          }

经过多方查阅资料之后历时 20 分钟终于修改了好了。
此问题产生原因有好几个依次讲解:首先是 prop 和 attr 方法的区别,虽然两者都是用来获取属性值,设置属性值.
但是 prop 针对的是对象,attr 针对的是节点。在 es1-5 因为 prop 没有出现所以一直使用的是 attr 方法进行属性值获取和设置,但是 es6 中 prop 出现之后,attr 方法就渐渐的只负责节点的属性。
所以上面我第一个错误就是方法使用的错误不应该使用 attr 方法而应该使用 porp 方法
错误二:属性传值问题,disabled 属性需要的布尔类型,不需要再加上引号进行传值直接写 true 和 flase 就可以了。
但是刚开始由于我这两个值都是这样书写但是禁用生效了,我一直认为这样的传值方式没有错误所以没有细想。后来发现这个属性只接受布尔类型;书写加上引号之后传递的是字符串。会将字符串转化为布尔类型。所以字符串不为空转为 true 类型禁用生效了;
ps:当时没发现这个错误的时候我自己想了另一个比较粗暴的方法也实现了功能。就是直接把这个禁用属性移除掉。然后居然也实现了功能。。。。。

  $('.input_sub').romveAttr('disabled')

此次分享到此结束。小白上路还行多多关照。欢迎大家进行相互学习交流此贴会继续更新

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1327 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...