如何根据元素的值重新排序元素的内容？第一名，第二名等[重复]

Question

我正在构建一个您可以查看 NFL 排名的页面。假设包装工队有 (2,0) 记录，维京人队有 (1,1) 记录。如果维京人赢得接下来的 2 场，而包装工队输掉接下来的 2 场，那么维京人现在应该排在第一位。 我有改变球队记录的按钮，但是有没有办法让他们在获胜最多时上升到第一名，在失败时下降，等等？ 如果一支球队排在最后，而我一直点击“W”（表示胜利），我希望他们能够超越其他胜利较少的球队，登上排行榜的顶端。谢谢！

var winpacker = 0;
var losepacker = 0;
var winviking = 0;
var loseviking = 0;
var winbear = 0;
var losebear = 0;
var winlion = 0;
var loselion = 0;

// PACKERS
document.getElementById('packerW').innerHTML = winpacker;
document.getElementById('packerL').innerHTML = losepacker;

function winPacker() {
  document.getElementById('packerW').innerHTML = winpacker++;
}

function losePacker() {
  document.getElementById('packerL').innerHTML = losepacker++;
}


// VIKINGS
document.getElementById('vikingW').innerHTML = winviking;
document.getElementById('vikingL').innerHTML = loseviking;

function winViking() {
  document.getElementById('vikingW').innerHTML = winviking++;
}

function loseViking() {
  document.getElementById('vikingL').innerHTML = loseviking++;
}


// BEARS
document.getElementById('bearW').innerHTML = winbear;
document.getElementById('bearL').innerHTML = losebear;

function winBear() {
  document.getElementById('bearW').innerHTML = winbear++;
}

function loseBear() {
  document.getElementById('bearL').innerHTML = losebear++;
}


// LIONS
document.getElementById('lionW').innerHTML = winlion;
document.getElementById('LionL').innerHTML = loselion;

function winLion() {
  document.getElementById('lionW').innerHTML = winlion++;
}

function loseLion() {
  document.getElementById('LionL').innerHTML = loselion++;
}

<p>
  Packers (<span id="packerW">0</span>,<span id="packerL">0</span>)<input type=button value="W" onclick="winPacker()" /><input type=button value="L" onclick="losePacker()" /><br> Vikings (<span id="vikingW">0</span>,<span id="vikingL">0</span>)<input
    type=button value="W" onclick="winViking()" /><input type=button value="L" onclick="loseViking()" /><br> Bears (<span id="bearW">0</span>,<span id="bearL">0</span>)<input type=button value="W" onclick="winBear()" /><input type=button value="L" onclick="loseBear()"
  /><br> Lions (<span id="lionW">0</span>,<span id="LionL">0</span>)<input type=button value="W" onclick="winLion()" /><input type=button value="L" onclick="loseLion()" />

Answer 1

您的方法应该是通过 Javascript 填充 HTML。我相信可能有更有效的方法，但下面应该没问题。

let records = [
  {
    name: 'Packers',
    wins: 1,
    losses: 0,
  },
  {
    name: 'Bears',
    wins: 1,
    losses: 0,
  },
  {
    name: 'Vikings',
    wins: 0,
    losses: 0,
  }
];

function addWin(i) {
  records[i].wins++;
  generateTable();
}

function addLoss(i) {
  records[i].losses++;
  generateTable();
}

function generateTable() {
  // Sorting by wins
  records.sort(function(a,b){return a.wins - b.wins});
  records.reverse();
  document.getElementById('table').innerHTML = '';
  
  for(let i = 0; i < records.length; i++) {
    document.getElementById('table').innerHTML += `${records[i].name} (${records[i].wins},${records[i].losses}) <button type='button' onClick='addWin(${i})'>W</button><button type='button' onClick='addLoss(${i})'>L</button><br />`
  }
}

generateTable();

<div id='table'></div>

Answer 2

DRY：不要重复自己。

这是一个完整的脚本。

• 使用基于对象的脚本生成 HTML
• 向容器添加事件监听器
• 按胜数排序

const results = { 
  packers: { win: 1, lose:1 },
  vikings: { win: 1, lose:1 },
  bears:   { win: 1, lose:1 },
  lions:   { win: 1, lose:1 }
}

const renderUL = () => {
  players.innerHTML = "";
  Object.keys(results).sort((a, b) => results[b].win - results[a].win)
    .forEach(key => {
      const html = [];
      html.push(`<li><span class="name">${key}</span>: (<span id="${key}W">${results[key].win}</span>, <span id="${key}L">${results[key].lose}</span>)`)
      html.push(` <input type="button" value="W" class="play" name="${key}"/>`)
      html.push(` <input type="button" value="L" class="play" name="${key}"/></li>`)
      players.innerHTML += html.join("");
    });

}

window.addEventListener("load", function() { // when the page loads
  const players = document.getElementById("players");
  renderUL(); // initialise the UL
  players.addEventListener("click", function(e) { // clicking anythin in the UL
    const tgt = e.target;
    if (tgt.classList.contains("play")) { // it's a button
      const wl = tgt.value === "W" ? "win" : "lose"; // win or lose?
      results[tgt.name][wl]++; // results["packers"]["win"] for example
        renderUL();
    }
  })
})

.name {
  text-transform: capitalize
}

#players {
  list-style-type: none;
}

<ul id="players"></ul>