js标签选项定制效果

点击按钮出现相应的值,如点击btn1出现show1;show里面显示最多出现四个,即点击btn里任意多个,在show里只显示四个,其余隐藏 需求分析: 要求被点击的选项/标签显示在指定容器里,且容器最
 点击按钮出现相应的值,如点击btn1出现show1;show里面显示最多出现四个,即点击btn里任意多个,在show里只显示四个,其余隐藏

 标签点击添加定制效果图
标签点击添加定制效果图

需求分析:

要求被点击的选项/标签显示在指定容器里,且容器最多只能显示4个被点击的选项/标签,多出的可以删除第一个或者最后一个,从而装载最新的一个进去

这是类似旅游网站那种,可以定制相关选项(条件),从而实现按条件搜索的目的

解决方法:

css样式

  1. <style type="text/css"
  2. ul,li{list-style:nonemargin:0padding:0
  3. #showBox label{display:inline-blockpadding:3px 5pxbackground-color:#fffdddborder:1px dashed #f60
  4. #itemBox li{float:leftheight:40pxline-height:40pxpadding:0 10pxmargin:10px 10px 0 0text-align:centerbackground-color:#690border:1px solid #333color:#fff
  5. </style> 

html结构(实际操作需要动态加载数据)

  1. <div id="showBox"> 
  2.     <!--<label data-type="1">阿萨德</label>--> 
  3. </div> 
  4. <ul id="itemBox"> 
  5.     <li data-type="1">机票</li> 
  6.     <li data-type="2">酒店</li> 
  7.     <li data-type="3">打车</li> 
  8.     <li data-type="4">签证</li> 
  9.     <li data-type="5">旅游</li> 
  10.     <li data-type="6">娱乐</li> 
  11. </ul> 

基于jquery的程序(记得引入jquery库文件)

  1. <script type="text/javascript"
  2.     $(function(){ 
  3.         $("#itemBox").find("li").click(function(){ 
  4.             var itemName = $(this).text(); 
  5.             var itemType = $(this).attr("data-type");  
  6.             var labelHtml = '<label data-type="'+itemType+'">'+itemName+'</label>'
  7.             $showBox = $("#showBox"); 
  8.             $showItem = $showBox.find("label"); 
  9.              
  10.             if($showItem.length < 4){ 
  11.                 var isHave = false
  12.                 $showItem.each(function(){ 
  13.                     if($(this).attr("data-type") == itemType){ 
  14.                         alert("该项已经添加过!"); 
  15.                         isHave = true
  16.                         return false;    
  17.                     } 
  18.                 }) 
  19.                 if(!isHave){ 
  20.                     $showBox.append('<label data-type="'+itemType+'">'+itemName+'</label>')  
  21.                 } 
  22.             }else
  23.                 if($showBox.find("label[data-type="+itemType+"]").length == 0){ 
  24.                     $showItem.eq(0).remove();//第一个移除 
  25.                     //$label.eq(3).remove();//最后个移除 
  26.                     $showBox.append(labelHtml)   
  27.                 }else
  28.                     alert("该项已经添加过!"); 
  29.                     return false;    
  30.                 } 
  31.             } 
  32.         }) 
  33.     }) 
  34. </script> 

 

感谢对久久经验网的支持!如有疑问,欢迎留言!

 

相关经验

导读书签
书签初始化中…