前端JS——类似评价时选择标签

如图这样的需求：

话不多说上代码???

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)
                }
            }
        })
    })