今天完成的事情，修改日报所述的iimportant权重问题，又又又出bug了。。

遇到的问题1。

$(".game-box").click(function () {
    // $('.role').removeClass('message-box');
    //运行点击事件时,清除role的类名,如果没有这个类名的话.
    $(".role").removeClass("message-box");
    //点击获取dom,给k所以盒子的kill添加,图片隐藏,因为图片本身时隐藏的.不写的话,它无法点击
    //其他盒子的时候显示
    $(".kill").css('display', 'none');

    //children查找子元素role之后,追加类名.改变颜色.
    // $(this).addClass('message-box');
    $(this).children(".role").addClass("message-box");
    //当前图片显示
    // $(this).siblings('img').show();
    $(this).children('img').show();
});

之前，获取当前点击的div，然后给它添加div的时候。需要背景颜色无法覆盖的问题，那个时候，就随便试了一下iimportant，就把问题解决了。但是考虑到代码的可维护性的话，我们还是在js里面通过添加，选择器的方法给它覆盖掉。

但是我实在想不到为什么覆盖不掉颜色。。导致我死亡的div，颜色渲染还是使用了，iimportant。

找到老宋，老宋问我，老宋给我的思路是运行顺序出错了。我检查了一下，按理说，我点击事件放到ready函数里面。其他加载完再去使用，应该不影响。

最后拽着老宋一起去排查问题，最后确定了是因为，权重的问题。按理说，后面的css样式会覆盖掉前面的css样式。

所以。

//给id选择器使用。
for (let i = 0; i < list.length; i++) {
    let div = (`<div class="game-box" id="kills">
                <div class="role ${list[i].class}">${list[i].name}</div>
                <div class="number">${i + 1}${typeface}</div>
                <img class="kill" src="../img/img-7-2.png" height="30" width="30"/>
                </div>`
    );
    //用jQuery模板渲染html
    $("#gaine").append(div);
}

.role{
  //background: #f5c97b;
  background-color: #f5c97b;
  margin: auto;
  width: 6rem;
  line-height: 5rem;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  border-left: 3px solid #fff;
}
.death{
  background: #565656;
}
.message-box{
  background-color: #21a8c8;
 }

role，应该在最前面，但是我们后面添加css选择器，却没能覆盖掉。

最后把death写在了，role的后面，可以被覆盖掉了。按理说，我的class添加的顺序是没有错的，但是万万没有想到的地方是，我使用了less。所以后面添加的css属性，与后面因为点击事件覆盖所添加的点击事件，我随便找了个地方就放进去了。因为作用域所以就导致没有办法被覆盖，而且。或者说，因为less的作用域的关系，是我们的role选择器，在描述的时候，更加精确一些，导致，下面的选择器的权重低于它。

我的role的描述，是在.main.class.class.role；。所以权重会高一些。

亚龙和他们没有出问题的原因是因为，页面过于简单，所以没有使用sass与less。

遇到的问题2。。第一天杀完人，投票页面的时候，我们往里面push的是death的0号位，老宋当时给我讲，让我投票完，在重新创建一个新的数组，在death，里面去push，做第二天的数组。。尴尬的地方就在于。。我没当回事。。因为那个时候，实在没有转过这个弯。

if( figure==5){
    //browser是玩家信息,由于执行环境的关系叫browser.death是死亡数组.push进去投票死去的人.
    var browser = JSON.parse(sessionStorage.getItem("list"));
    var death=JSON.parse(sessionStorage.getItem("death"));
    death[death.length-1].push({name: browser[subscript].name,number: browser[subscript].number,state: browser[subscript].state=2,class:browser[subscript].class="death"});
    //浏览器存值，death死亡数组存入。list，存入死掉的玩家状态。
    death.push([]);
    sessionStorage.setItem("death",JSON.stringify(death));
    sessionStorage.setItem("list",JSON.stringify(browser));
    //投票生成天数数组。
    sessionStorage.setItem("dies",JSON.stringify(death.length));
    //修改浏览器步骤.
    figure=1;
    sessionStorage.setItem("figure",figure);
    window.location.href="../html/start-game.html";

导致，后面投完票之后，我的数组长度变成2了，我傻乎乎的拿着1去判断。这也算不上什么大问题。最尴尬的是，杀人与投票的提示又又又出现问题了。

第一天杀人之前，我的数组长度是1，death【 [] 】；所以我杀完人，肯定是取0号位的，0号位。投票是0号位的，1号位。

但是，但是第二天，我数组长度就是2了啊，我需要取，deah[ [] ]，1号位的，0号位，与1号位的·，1号位。

尴尬的地方就在于，

第一天杀人的话，你取的是，deaht【0】【0】号位。所以当时咱们数组长度是1，death.lenth-1.

第二天杀人，我们取death【1】【0】，当时我们的数组长度是2，所以death.lenth-1,但是death.lenth-1，这肯定会报错的，因为我们得取，0号位的。

我感觉我们需要写一个判断，但是我之前的判断就是。

if (digit==2){
    $(".btn-one").eq(-1).css("background","#696969");
    $(".left-triangle-one").eq(-1).css({"border-right":"30px solid #696969"});
    let murder="号被杀死杀死，真实身份是";
    let information=(`<p class="situation">${death[death.length-1][death.length-1].number}${murder}${death[death.length-1][death.length-1].name}</p>`);
    $(".weather").eq(-1).append(information);
}

如果是步骤2的话，就xxx。

一时半会没有想到好的思路。。

今天的收获，在css权重问题，覆盖，样式加载顺序。之前写css的时候，有id选择器，各种选择器可以用，也没有留意过这个问题。但是js里面，id选择器我们只能唯一使用，加入iimportant。根本不好维护。

明天改bug写判断。