利用JS加载全部的一个demo案例

日常项目中网页上为了节约空间(也有些是业务需要,凸显业务项目),往往会将一些内容隐藏起来,然后通过JS点击全部显示出来。

 

加载显示全部银行
加载显示全部银行
 

需求:假设公司业务合作有8个银行,现在要求显示默认推荐的5个银行,其余不显示,但是通过点击全部显示。

很常见的一个前端效果。有两种思路:

JS+CSS

将不显示的银行全部装在一个隐藏的容器里,点击“选择其它银行”让容器显示show()

JSON对象

把银行写成一个JSON对象,通过控制索引显示。

 
第一种思路相信大部分人都清楚,那么我重点讲述通过第二种思路即对象去实现。代码如下:

HTML代码:

  1. <div id="bankBox">loading...</div><button type="button" id="showAll">加载全部</button> 

 JS代码:

  1. var bankObj = {'中国银行':1,'农业银行':2,'建设银行':3,'工商银行':4,'招商银行':5,'兴业银行':6,'交通银行':7,'杭州银行':8} 
  2.  
  3. function bankShowFn(bankObj,isShow){ 
  4.     var str = ''
  5.         num = 0, 
  6.         limit = 5; 
  7.     if(isShow && isShow == 1){ 
  8.         limit = 8;//假设要全部显示的银行个数     
  9.     } 
  10.     $.each(bankObj,function(name,index){ 
  11.         if(num  == limit){ 
  12.             return false
  13.         } 
  14.         str += '<span style="padding-left:2em">'+name+'</span>'
  15.         num ++; 
  16.     }) 
  17.     return str; 
  18.     //以上得到默认显示的五个银行 
  19.  
  20.  
  21. $('#bankBox').html(bankShowFn(bankObj));//显示默认的5个银行 
  22.  
  23. $('#showAll').on('click'function(){//加载全部银行或隐藏 
  24.     var $node = $(this), 
  25.         isShow = 1; 
  26.     if($node.hasClass('hide')){ 
  27.         isShow = 0;  
  28.         $(this).removeClass('hide').text('加载全部…'); 
  29.     }else
  30.         $(this).addClass('hide').text('隐藏');     
  31.     } 
  32.      
  33.     $('#bankBox').html(bankShowFn(bankObj,isShow)) 
  34. }) 

最终效果:

默认显示5个银行
默认显示5个银行

 

加载全部银行
加载全部银行

有不清楚的同学欢迎加入前端技术QQ群讨论:239274519

 
 

相关经验

导读书签
书签初始化中…