无法在条件检查

时间:2017-03-07 08:36:49

标签: javascript html css

功能

表格中的第一行数据应为字体颜色白色,而表格中的其余数据应为字体颜色橙色。

问题:

此时,整行数据为橙色,无法将数据的第一行设置为橙色,而其余数据为白色。有什么问题?请帮忙。



var data = "A,4.0,00:04@B,5.0,00:05@C,9.0,00:09";
var playerList = data.split("@");

var innerList;
for (i = 0; i < playerList.length; i++) {
  var [name, , score] = playerList[i].split(",");
  var [minute, second] = score.split(":");

  $("#Player_Name")
    .html(function(index, html) {
      var prop = index === 0 ? name : score;
      return html + prop + "<br>"
    })

  $("#Player_Minute_Score, #Player_Second_Score").html(function(index, html) {

    var prop = index == 0 ? minute : second;

    return html + prop + "<p>"
  })
}
&#13;
#Rugby_Scoreboard {
  position: absolute;
  left: 335px;
  top: 182px;
  width: 825px;
  height: 818px;
  border-collapse: collapse;
}

#Rugby_Scoreboard div {
  z-index: 50;
  position: absolute;
  top: 10px;
  font-size: 40px;
  font-family: 'OpenSans-Bold';
  width: 1080px;
  color: #ff8c04;
}

#Rugby_Scoreboard div font {
  display: block;
}

#Rugby_Scoreboard div font:first-child {
  color: white;
}

#Player_Name {
  left: 120px;
}

#Player_Minute_Score {
  left: 580px;
}

#Player_Second_Score {
  left: 700px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Game_LeaderBoard" style="position:absolute; z-index:6; top:0px; left:0px; width: 1920px; heigth: 1000px; margin:auto;">

  <table id="Rugby_Scoreboard">
    <tr>
      <td>
        <div id="Player_Name">
          <font face="OpenSans-Bold"></font>
        </div>
      </td>

      <td>
        <div id="Player_Minute_Score">
          <font face="OpenSans-Bold"></font>
        </div>
      </td>

      <td>
        <div id="Player_Second_Score">
          <font face="OpenSans-Bold"></font>
        </div>
      </td>
    </tr>
  </table>

</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

你在#Player_Second_Score中缺少#调用.html jquery函数时缺少id选择器,因此你没有获得索引而且它永远不会== 0所以函数.css没有被调用

但你为什么甚至使用jquery?您可以使用css伪元素:first-child:nth-child(odd, even, or child number)

这还有其他一些需要修复的拼写错误,例如[minute, seconod]中的第二个拼写错误我们所有人都不用担心

答案 1 :(得分:0)

添加);在结束之后}将会破坏你的整个代码。并且第n个孩子的工作方式就像这个tr:nth-child(1)>td{ color: #ffffff; }你也可以使用第一个孩子这样做是为了使第一个tr中所有td白色的文本颜色

出于某种原因,它不允许我回复评论