首页 > 解决方案 > 根据玩家 ID 加总玩家点数

问题描述

采取以下标记:

<div data-player-id="1" data-points="8">Player 1</div>
<div data-player-id="1" data-points="8">Player 1</div>
<div data-player-id="2" data-points="5">Player 2</div>
<div data-player-id="2" data-points="5">Player 2</div>
<div data-player-id="3" data-points="6">Player 3</div>

我想做的是结合每个data-player-id.

所以我的想法是迭代data-player-id并为每个玩家创建一个对象,如下所示:

const points = [];

document.querySelectorAll('[data-player-id]').forEach((element) => {
  const player = {
    id: element.getAttribute('data-player-id'),
    points: element.getAttribute('data-points'),
  }

  // Combine all players with the same "id"

  points.push(player);
});

我遇到的问题是将所有对象与相同的id.

它不一定必须是一个对象,如果使用数组更好,我很高兴沿着这条路线走。

标签: javascriptobjectmath

解决方案


您可以将points变量转换为对象而不是数组,并使用玩家 ID 作为键。然后,在您的querySelector循环中,检查对象中是否已存在玩家 ID 键points,在这种情况下,对点求和。如果不存在,则将其设置为当前元素的点。

const points = {};

document.querySelectorAll('[data-player-id]').forEach((element) => {
  const playerId = element.getAttribute('data-player-id');
  const playerPoints = parseInt(element.getAttribute('data-points'), 10);

  if (playerId in points) {
    points[playerId] += playerPoints;
  } else {
    points[playerId] = playerPoints;
  }
}

如果您想稍后将其转换为与您的问题相同的数据结构,您可以在之后进行转换:

const players = {};
for (const playerId in points) {
  players.push({ id: playerId, points: points[playerId] });
}

推荐阅读