类似于点评的标签选择

一、该实现参考与以下网上前辈的思路。最下面的二是自己的实现过程：

<html>
<head>
    <title>类似评论、点评的JS标签选择功能</title>
    <style>
        .c{ width:100px; height:25px; line-height:25px; text-align:center;border:1pxsolid #eee; margin:10px; float:left; font-size:12px; cursor:pointer }
    </style>
</head>
<body>
    <div class="c" id="c0">啤酒</div>
    <div class="c" id="c1">香烟</div>
    <div class="c" id="c2">饮料</div>
    <div class="c" id="c3">瓜子</div>
    <div class="c" id="c4">水果</div>
    <div class="c" id="c5">茶水</div>
    <input id="i" type="text" style="width:720px; height:25px; border:1px solid #ccc"/>
    <script>
        var x=["啤酒","香烟","饮料","瓜子","水果","茶水"];
        var y=[];
        function $(id){ return document.getElementById(id)};
        for(var i=0,m=x.length;i<m;i++){
             $("c"+i).onclick=(function(i){
                 return function(){
                     var s=y.join(",").indexOf(x[i]);
                     if(s>=0){
                          for(var r in y){
                               if(y[r]==x[i]){y.splice(r,1)}
                           }
                     }else{
                         y.push(x[i])
                     } 
                  $("i").value=y.join(" ");
              }
            })(i)
         }
    </script>
</body>
</html>

效果：点击某标签便添加进来再次点击从div中去除

二、需要下载AUI中css 使用aui-label实现（标签里的内容为字符数组，此处的标签数组option是后台查出传入的。）

//html部分
<ul class="aui-list aui-form-list">
    <li class="aui-list-item">
         <section class="aui-content-padded" id='selectGx'>
         </section>
    </li>
</ul>
//js部分
    //判断数组是否包含某元素    是：true  否：false
	function isInArray(arr,value){
	    for(var i = 0; i < arr.length; i++){
	        if(value === arr[i]){
	            return true;
	        }
	    }
	    return false;
	}
	//取标签差集
	function getDifSet(arr1,arr2){ 
		var arr3 = new Array(); 
	    for(var i=0; i < arr1.length; i++){ 
	        var flag = true; 
	        for(var j=0; j < arr2.length; j++){ 
	            if(arr1[i] == arr2[j]) 
	            flag = false; 
	        } 
	        if(flag) 
	        arr3.push(arr1[i]); 
	    }
	    return arr3; 
	}

//显示标签点击颜色变化
function showBq(option){
		$("selectGx").innerHTML="";
		function $(id){ return document.getElementById(id)};
		var newoption = [].concat(option);
		for(var i = 0;i < option.length;i++){
			 $("selectGx").innerHTML+="<div id='option"+i+"' class='aui-label' style='font-size: 18px;margin: 0px 15px 6px 5px;border-radius:25px;'>"+option[i]+"</div>";
		}
		for(var j=0;j<option.length;j++){
			(function(j){
				$("option"+j).onclick=function(){
					$("option"+j).className = "aui-label aui-label-info";//styleclass为新的属性值
					$("option"+j).setAttribute("class","aui-label aui-label-info"); 
					
					if(isInArray(newoption,option[j])){
					  	for(var r in newoption){
					   		if(newoption[r] === option[j]){newoption.splice(r,1)}
					   	}
					}else{
					   	newoption.push(option[j]);
					   	$("option"+j).className = "aui-label";//styleclass为新的属性值
						$("option"+j).setAttribute("class","aui-label"); 
					}
					//newoption为未选中的标签
					//选中的标签 getDifSet(option,newoption)
				 }
			})(j);
		}
	}

手机上效果：选中高亮显示

类似于点评的标签选择

猜你喜欢