js标签选项定制效果

 
标签点击添加定制效果图

需求分析：

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

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

解决方法：

css样式

 
ul,li{list-style:none; margin:0; padding:0} 
#showBox label{display:inline-block; padding:3px 5px; background-color:#fffddd; border:1px dashed #f60} 
#itemBox li{float:left; height:40px; line-height:40px; padding:0 10px; margin:10px 10px 0 0; text-align:center; background-color:#690; border:1px solid #333; color:#fff} 
 

html结构（实际操作需要动态加载数据）

 
     
 
 
    机票
 
    酒店
 
    打车
 
    签证
 
    旅游
 
    娱乐
 
 

基于jquery的程序（记得引入jquery库文件）

 
    $(function(){ 
        $("#itemBox").find("li").click(function(){ 
            var itemName = $(this).text(); 
            var itemType = $(this).attr("data-type");  
            var labelHtml = ''+itemName+''; 
            $showBox = $("#showBox"); 
            $showItem = $showBox.find("label"); 
             
            if($showItem.length < 4){ 
                var isHave = false; 
                $showItem.each(function(){ 
                    if($(this).attr("data-type") == itemType){ 
                        alert("该项已经添加过!"); 
                        isHave = true; 
                        return false;    
                    } 
                }) 
                if(!isHave){ 
                    $showBox.append(''+itemName+'')  
                } 
            }else{ 
                if($showBox.find("label[data-type="+itemType+"]").length == 0){ 
                    $showItem.eq(0).remove();//第一个移除 
                    //$label.eq(3).remove();//最后个移除 
                    $showBox.append(labelHtml)   
                }else{ 
                    alert("该项已经添加过!"); 
                    return false;    
                } 
            } 
        }) 
    }) 
 

感谢对久久经验网的**！如有疑问，欢迎留言！

原创文章转载请注明出处！原文链接：https://www.exp99.com/fangan/f2e/qianduanfangan_49.html

本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z