创建基本的HTML / Javascript排行榜

Question

是否可以轻松实现和完成Javascript我不确定但是...

如下面的代码所示，我有5个玩家，每个玩家都有不同的分数。我希望对它进行编码，以便根据自己的分数自动重新定位玩家。理所当然，如果可能的话，我还想把前3行的颜色变成金银铜。

任何帮助这个或指向我正确的方向将非常感激。我不确定我应该从哪里开始。

#container {
	width: 600px;
	height: auto;
}

.row {
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	border-bottom: 1px solid #AFAFAF;
}

.name {
	position: relative;
	display: inline-block;
	width: 75%;
	line-height: 45px;
}

.score {
	position: relative;
	display: inline-block;
	width: 25%;
}

<div id="container">
    <div class="row">
        <div class="name">Player1</div><div class="score">430</div>
    </div>
    
    <div class="row">
        <div class="name">Player2</div><div class="score">580</div>
    </div>
    
    <div class="row">
        <div class="name">Player3</div><div class="score">310</div>
    </div>
    
    <div class="row">
        <div class="name">Player4</div><div class="score">640</div>
    </div>
    
    <div class="row">
        <div class="name">Player5</div><div class="score">495</div>
    </div>
</div>

Answer 1

您可以使用nth-child()将前3行设置为所需的颜色

/* Gold */
.row:nth-child(1) {background: gold;}
/* Silver */
.row:nth-child(2) {background: #c0c0c0;}
/* Bronze */
.row:nth-child(3) {background: #cd7f32;}

接下来对项目进行排序，您可以将行放入数组中，然后使用sort对项目进行排序。

document.addEventListener('DOMContentLoaded', () => {
  let elements = []
  let container = document.querySelector('#container')
  // Add each row to the array
  container.querySelectorAll('.row').forEach(el => elements.push(el))
  // Clear the container
  container.innerHTML = ''
  // Sort the array from highest to lowest
  elements.sort((a, b) => b.querySelector('.score').textContent - a.querySelector('.score').textContent)
  // Put the elements back into the container
  elements.forEach(e => container.appendChild(e))
})

#container {
  width: 600px;
  height: auto;
}

.row {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #AFAFAF;
}

.name {
  position: relative;
  display: inline-block;
  width: 75%;
  line-height: 45px;
}

.score {
  position: relative;
  display: inline-block;
  width: 25%;
}

.row:nth-child(1) {
  background: gold;
}

.row:nth-child(2) {
  background: #c0c0c0;
}

.row:nth-child(3) {
  background: #cd7f32;
}

<div id="container">
  <div class="row">
    <div class="name">Player1</div><div class="score">430</div>
  </div>

  <div class="row">
    <div class="name">Player2</div><div class="score">580</div>
  </div>

  <div class="row">
    <div class="name">Player3</div><div class="score">310</div>
  </div>

  <div class="row">
    <div class="name">Player4</div><div class="score">640</div>
  </div>

  <div class="row">
    <div class="name">Player5</div><div class="score">495</div>
  </div>
</div>

Answer 2

如果您使用Javascript而不是HTML表示数据结构，我相信您将在这里度过更愉快的时光。你对我描述的东西听起来像是一组数据，在这种情况下我会把它变成一个Javascript对象数组。

const playerArray = [
  {name: "Player1", score: "430", id:"player1"},
  {name: "Player2", score: "580"}, id:"player2"},
  {name: "Player3", score: "310"}, id:"player3"},
  {name: "Player4", score: "640" id:"player4"},
  {name: "Player5", score: "495", id:"player5"}
]

然后基于“对象的得分属性”对这个数组进行排序有点棘手，但在this stack overflow answer的帮助下我会说你可以这样写：

function compare(a,b) {
  if (a.score < b.score)
    return -1;
  if (a.score > b.score)
    return 1;
  return 0;
}

playerArray.sort(compare);

然后，每次玩家加入，离开，提交分数等（修改playerArray的任何内容）时，您都会调用此排序方法。

然后，您可以从所有行中删除所有金，银，铜样式，然后添加添加金色

document.getElementById(playerArray[0].id).style.background: gold;
document.getElementById(playerArray[1].id).style.background: #c0c0c0;
document.getElementById(playerArray[2].id).style.background: #cd7f32;;

作为旁注，前端框架（如angular或react）可以让您更轻松地根据Javascript集合和更具声明性的语法更新ui。

Answer 3

/ *您可以使用突出显示类为行着色...................................... ..................这里是小提琴

http://jsfiddle.net/fgybyem2/15/

*/

var $divs = $("div.row");
$(document).ready(function () {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find(".score").text() > $(b).find(".score").text();
    });
    $("#container").html(numericallyOrderedDivs);    

   $("#container").find(".row:eq(0)").addClass("highLight");
   $("#container").find(".row:eq(1)").addClass("highLight") 
   $("#container").find(".row:eq(2)").addClass("highLight");



});

/ *您可以使用突出显示类为行着色...................................... ..................这里是小提琴

http://jsfiddle.net/fgybyem2/15/

*/

Answer 4

当数据（分数）发生变化时，一种天真的方法是为排行榜中的每一行动态创建HTML元素。

    <div id="leaderboard" class="container">
        <!-- scores will be inserted by the script here -->
    </div>
    <button onclick="randomize()">Randomize</button>
    <script src="script.js"></script>

的script.js

let scores = [
    {name: "Player 1", score: 300},
    {name: "Player 2", score: 370},
    {name: "Player 3", score: 500},
    {name: "Player 4", score: 430},
    {name: "Player 5", score: 340},
];

function updateLeaderboardView() {
    let leaderboard = document.getElementById("leaderboard");
    leaderboard.innerHTML = "";

    scores.sort(function(a, b){ return b.score - a.score  });
    let elements = []; // we'll need created elements to update colors later on
    // create elements for each player
    for(let i=0; i<scores.length; i++) {
        let name = document.createElement("div");
        let score = document.createElement("div");
        name.classList.add("name");
        score.classList.add("score");
        name.innerText = scores[i].name;
        score.innerText = scores[i].score;

        let scoreRow = document.createElement("div");
        scoreRow.classList.add("row");
        scoreRow.appendChild(name);
        scoreRow.appendChild(score);
        leaderboard.appendChild(scoreRow);

        elements.push(scoreRow);

    }

    let colors = ["gold", "silver", "#cd7f32"];
    for(let i=0; i < 3; i++) {
        elements[i].style.color = colors[i];
    }
}

updateLeaderboardView();
function randomize() {
    for(var i=0; i<scores.length; i++) {
        scores[i].score = Math.floor(Math.random() * (600 - 300 + 1)) + 300;
    }
    // when your data changes, call updateLeaderboardView
    updateLeaderboardView();
}