如图这样的需求:
话不多说上代码???
CSS部分:
ul{
width: 400px;
display: flex;
flex-wrap: wrap;
border:1px solid #eee;
padding: 10px;
}
ul li{
list-style-type: none;
min-width: 50px;
height: 20px;
margin-right: 10px;
margin-bottom: 10px;
padding: 0px 3px;
color:rgb(183,184,186);
background: rgb(236,240,245);
float: left;
text-align: center;
line-height: 20px;
font-size: 10px;
cursor: pointer;
border-radius: 3px;
}
.selected{
font-weight:bold;
background: rgb(51,137,240);
color:#fff;
}
HTML部分:
<ul id="test">
<li id="1">车内整洁</li>
<li id="2">活地图认路</li>
<li id="3">驾驶平稳</li>
<li id="4">服务态度很棒</li>
<li id="5">车牌号不符</li>
<li id="6">道路不熟</li>
<li id="7">司机吸烟</li>
<li id="8">索要好评</li>
</ul>
JS部分:
/**
* 第一种方法
* 如果你最后要的数据格式是这样 [{id:1, value:"车内整洁"},{id:2, value:"活地图认路"}]
* 则可以使用以下方法
**/
$(function(){
var list = new Array
$("#test li").click(function() {
var data = {}
data.id = $(this)[0].id
data.value = $(this).text()
if(JSON.stringify(list).indexOf(JSON.stringify(data))==-1){
list.push(data)
$(this).addClass('selected')
}else{
for(let i =0; i<list.length; i++){
if(list[i].id == data.id){
list.splice(i,1)
}
}
$(this).removeClass("selected")
}
console.log(list)
})
})
/**
* 第二种方法
* 如果你最后要的数据格式是这样的 [车内整洁, 活地图认路, 驾驶平稳]
* 则可以使用以下方法
**/
$(function(){
var list = new Array
$("#test li").click(function() {
text = $(this).text()
$(this).hasClass('selected') ? $(this).removeClass("selected") : $(this).addClass('selected')
for( let i = 0; i<list.length; i++ ){
if(list[i] == text) {
list.splice(i,1)
}else{
list.push(text)
}
}
})
})