JavaScript前端页面取值,需要实现颜色的多选和第二次点击取消选中.

上图是前端页面.
前端代码如下:

我写的取值代码如下:
$(".dia_menu_lst span").click(function (e) {
    $(this).siblings().each(function(){
       $(this).removeClass("selected"); //去除同一个div下span兄弟节点的选中状态
    });
    $(this).toggleClass("selected"); // 点击某个span时添加或移除选中状态
    weight =$('#weigdiv .selected').attr('data'); //选择含有选中状态selected的元素（有选中状态状态的span）
    neatness =$('#neatdiv .selected').attr('data');
    var color =$('#colordiv .selected').attr('data');
    alert(ctgId +" "+weight+" "+neatness+" "+color);
}); 
    问题:因为每次点击的时候会去除兄弟的选中状态,所以实现不了多选.neatness和weight需要单选,color需要多选.求教各位大神怎么取得多选的color的值,我每次都只能取到一个.
    PS:我试过用color+=color,但是这样只能往里面增加值,当我取消选中的时候,被取消的span的值还在color里面,求教取消选中时撤销对应的color值怎么做

前端代码没贴出来,补充一下:

https://www.cnblogs.com/Steven-shi/p/5111686.html

你html没给全啊 兄弟

 最后遍历选中的那几条数据，赋值给一个变量就行了 随便写的，不一定正确
var color="";
var i=0;
$('#colordiv .selected').each(function(){
if(i!=0){
 color+=","+$(this.attr("data"));
}else{
 color+=$(this.attr("data"));
}

     i++;
})

$("#colordiv span").click(function () {
$(this).toggleClass("selected"); //实现多选的话不要用sibling().removeClass(),用toggleClass就可以，不影响同级元素的选择
});
var colorList=[];//将所选的颜色封装在一个数组里；
$("#colordiv span").each(function (index, id) {
if ($(this).hasClass("selected")==true) {
colorList.push($(this).attr("id"));
}
});
colorList = colorList.join(",");//用逗号隔开，方便取值

var selArr = [];//用于装要传的参数
$(".dia_menu_lst span").click(function(e) {
if($(this).hasClass("activity")){
$(this).removeClass("activity");
}else{
$(this).addClass("activity");
}

            $(".dia_menu_lst span").each(function(index,item) {
                if(item.hasClass("activity")){
                    var data = $(item).attr("data");
                    selArr.push(data);
                }
            }); 
        });

      $('#colordiv>span').click(function() {
                $(this).addClass('active'); //active为选中的样式
            })
            $('#colordiv>.active').click(function() {
                $(this).removeClass('active');
            })

    $('#colordiv>span').click(function() {
                $(this).addClass('active'); //active为选中的样式
            })
            $('#colordiv>.active').click(function() {
                $(this).removeClass('active');
         })

使用上在的jquery方式，即可实现。active这个样式自已定义 。