前端设计

   :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

类似评论、点评的JS标签选择功能,淘宝网上面也有此功能,用户在选择点评的时候,点击一下文字,文字就会被选中,发表点评的时候,不少网站为了方便用户浏览,都预留了一些点评关键字,比如:好、很好、很差等,省去用户输入的麻烦。

<title>类似评论、点评的JS标签选择功能</title>
<style>
.c
{ width:100px; height:25px; line-height:25px; text-align:center; border:1px solid #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>

  

posted on 2011-07-19 13:57  前端设计  阅读(285)  评论(0编辑  收藏  举报