醉梦孤城的个人博客

记录我旅程美好的风景

Open Source, Open Mind,
Open Sight, Open Future!
  menu
9 文章
19681 浏览
3 当前访客
ღゝ◡╹)ノ❤️

关于自己学习中踩得坑

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

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

在日常开发中我们也会碰到关于按钮禁用的问题,而我这个问题发生的原因是我在进行项目后台管理系统的登录页面时突发奇想,想给在通过正常的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')

20191018------更新
今天在开发中使用了两个基于jQuery的插件但是一直莫名其妙的进行报错,检查了半天但是代码完全没有问题,最后怀疑是引入的js文件出现错误。但是该引入的文件已经引入。思前想后还是找不到问题最后一点一点删代码。终于解决问题了。而且原因比较让人哭笑不得,是因为引入文件的先后顺序导致的。两个jQuery插件都是基于jQuery之上生效的但是我做项目时一不小心把jQuery文件引入放到了最后面。才导致了问题的发生。。。。
20191107----更新
在关于vue框架的学习使用中,突发奇想想拿vue做一个轮播图。于是乎就开始构思思路,开始实现。但是问题也是应面而来。一顿操作猛如虎,一看代码底气无啊。写到最后才发现。图片一直无法显示。????顿时满脑黑人问号。检查底代码读取路径也没错(采用数据绑定来实现切换图片路径),为了测试是否是路径问题,然后在写一个img便签直接写路径没有采取vue变量读取发现居然能够显示,真相真是越来越迷离。最后通过搜索引擎查找原因终于找了了。原来图片链接是需要通过 require包裹的,然后我更改掉数组内存储元素的格式。终于一个基于vue的轮播图诞生了。

//更改之后的存放图片路径的数组
      data() {
          return {
              urlList:[ require("../assets/h1.jpg"),
              require("../assets/m1.jpg"),
               require( "../assets/w1 .jpg"),
              ],
              currenIndex:0,
              timer:null,
              src:'',
          }
      },

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


标题:关于自己学习中踩得坑
作者:zuimenggucheng
地址:http://chengwy.top:8080/articles/2019/10/12/1570876268663.html