Fork me on GitHub

记一次与a标签相遇的小事

  最近做的一个项目,按钮使用的是a标签做的,样子还不错。不过正是这个a标签把我坑死了,有一个场景是点击a标签去调后台服务,为了防止用户频繁点击按钮提交,在去请求后台服务的时候肯定要先把按钮的事件给禁止掉,后台服务回来之后,要把按钮变成可以点击的状态。button有一个disabled属性可以禁止按钮的点击,但是a标签并没有这个属性,disabled对它没有用。当时想了许久都不知道怎么去处理这个东西,想过把a标签换成button,但是一想到要找UI修改demo就不去了,顺便增加一下自己这方面的知识。下面写一下LZ面对这一小问题的尴尬经历。

  找了许久的资料,发现都没有很好的方法符合自己的要求,想到one、off、remove,但是然并卵,去掉之后事件就回复不来了,真是尴尬。原本自信满满的一下子觉的真艰难,后面又去看了看jquery的api有没有符合的,发现也是木有。LZ暂时就在一些只要点击一次的事件使用了one或remove,但是转念一想不对呀,要是服务报错了,用户就点击不了,这要把用户坑了,把用户坑了就是把自己坑了。这不相当给自己挖一个坑,自己跳下去呀,LZ肯定不能干着事情呀。LZ马上觉的还是去一趟WC比较靠谱,放松放松一下脑子。

  回来之后,果然脑子好使了,联想到自己处理过多次弹框的问题(有多次相同的弹框,场景要求只能弹一次),发现与这个还有点类似,与马上动手搞。先得有一个a标签吧!

  <a class="btn">我就要点多次,你能咋得</a>

  要有事件吧!(LZ内心暗骂,擦,不要怂,就是干!)

var isOnclick=true;//默认可以点击 
  $(".btn").on(click,function(){
        if(isOnclick){
            isOnclick=false;//不能点击了
            ajax{//不管成功与否都把isOnclick设置为true,即可点击的状态
            。。。。。。。。。。。
            isOnclick=true;
          }
    )
}

 上面就是一个简单的过程,不过实现了自己需要的东西。主要就是设置一个变量来判断a标签目前的状态,说一下主要的流程:

  1、首先定义一个变量isOnclick,默认为true.即一进去页面默认a标签为可点击状态。

  2、当用户点击之,立即把isOnclick设置为false,这样用户多次点击都不会重复执行。

  3、当后台服务完成,把isOnclick设置为true,这样a标签又可以点击了。

 完成上面的流程后,a标签肯定变成这样了。哈哈,此时LZ的心情!!!

<a class="btn">大哥,我错了。给点饭吃吧</a>

  不过本着精益求精的原则,LZ突然想不能点击的时候是不是得有点提示呀,不然用户不知道,一直在那狂点,没有撒作用。不得投诉LZ的代码。肯定会一边点着鼠标,一边把口中暗骂,那个SB写的代码,完全没有用嘛。此时LZ肯定会打了个喷嚏,是谁在想我???想想就觉的全身发抖。以上内容纯属LZ瞎逼逼的。吼吼吼,回到问题中来,不过为了让用户体验更好,一般都会在按钮点击不了之后把按钮置灰,这也相当与提醒用户此时按钮是不可点击的。想到着LZ马上找到UI,给我做一个置灰的按钮呗。UI肯定也烦了,一下子这个,一下子那个。这么简单的事情都不会(其实这也是LZ瞎想的,哈哈,想象力已经丰富到一个境界了)。其实也就设置了一个背景颜色,做为一个后端狗,LZ这点还是会的,写一个bcakgruond-color嘛,lz数了数,加上-一共16个字母写错2个,正确率快到90%了呢。哈哈,正确的写法是btn-color{ background-color: gray;}。现在的a标签已经变为这样了。

<a class="btn">干嘛不给人家加一个好看的颜色,呜呜</a>

 

  一想到a有样式了,LZ又不爽了,我还是把你干趴下,不然人生艰难。马上又写了一段吊炸天的代码(感觉LZ真辛酸,这就掉渣天了)。

$(".btn").on(click,function(){//默认a不带颜色,可以点击
   if(!$(this).has("btn-color")){//
      $(".btn").addClass("btn-color");//颜色变暗,不可点击
      ajax{//
          。。。。。。。。。。。
          $(".btn").removeClass("btn-color");//又可以点击了
      }
   }
}

  发现这个简单了一点,代码控制的好了一点。不过lz还是决定把流程梳理一下,以防有跟我一样的小伙伴遇到这种问题,为扩大我们的队伍做贡献(义正言辞呀)。主要思路是依靠一个样式来判断状态,主要流程是:

  1、先行一个样式。样式可以随便啦!默认是没有样式的啦

  2、在js中判断有没有这个样式,有肯定不能让它进后台了,所以使用了一个!。

  3、没有就是正常的按钮,可以放它过去,有就不能让它过去。

  终于把事件解决了,好开心。不过lz也发现好像这个要是直接用浏览器修改一下类是不是也可以提交了。这个问题还没有测试,不过相信lz90%的字母正确率的代码是有用的(那来的自信,lz天生自信满满),后面测试一下在来考虑这个问题了。打扫战场,总结经验,以防止敌人扩大战线(好严肃呀)。回归正题,虽然这是一个很简单的问题,但是也觉的能够学习到东西,主要是以下几点:

  1、细节与体验方面也是在写代码不可以错过的地方。

  2、思维方式不能固定,以为button有相应的属性,a标签也会有相关的属性,思维定势。多个角度思考问题。

  3、小问题也要大思考。

  lz自身不足:

  1、经验啦!

  2、知识面啦!

  一说不足就字少了,鄙视自己。哈哈,肯定有人问字母正确率这么低不是不足吗???哈哈。

  lz与a标签的相遇就这样结束啦,小伙伴有没有更好的做法呢,lz需要集思广益呢。有的话的请拿起手中的电话拨打以下号码:88888888888

posted @ 2016-10-25 20:39  鹏&鹏  阅读(1183)  评论(4编辑  收藏  举报