如何为 DOM 创建的对象分配唯一标识符？答案

【问题标题】：How to assign DOM created objects unique identifiers?如何为 DOM 创建的对象分配唯一标识符？
【发布时间】：2018-11-20 02:05:20
【问题描述】：

这是我的第一个问题，如果不够具体或缺少关键细节，敬请见谅。

我正在通过教程学习 JS，并将其应用于构建相当于甲板构建器的东西。

出现一堆牌，你选择一张，它就会被添加到牌组中。这些卡片被转换为对象并添加到一个数组中，该数组表示选择要在牌组中的卡片

我的问题是当多张相同的牌放入一副牌时，而您只想移除其中一张。我不能只针对那一张，因为我所有的比较运算符都选择了这两个实例.

这是我在 Github 上的 repo，以防它解释得不够清楚： https://github.com/caldwell619/armada-fleet/tree/data-attr

具体来说，这是我正在努力解决的 sn-ps：

从数组chosenFleet.ships中移除一艘船：

for (var i = 0; i < chosenFleet.ships.length; i++) {
    if ($(this).data("name") === chosenFleet.ships[i].name) {
        chosenFleet.ships.splice(i, 1);

我尝试为所有对象应用唯一标识符，但由于我的函数基于重写 HTML，

 pickedShips.innerHTML = "";
            for (let ship of chosenFleet.ships) {
                // div creation
                const shipSel = shipSelect(ship);
                pickedShips.appendChild(shipSel);

所有唯一标识符最终都是相同的，因为每次触发事件侦听器时，都会根据数组 ships 的当前状态重写 HTML 元素。

根据选择的船创建 HTML 的函数：

const shipSelect = (ship) => {
const selectedShipContainer = document.createElement("div");
const shipImgContainer = document.createElement("div");
const shipNameContainer = document.createElement("div");
const shipImg = document.createElement("img");
const shipName = document.createElement("p");
const upgradeBar = document.createElement("div");
const deleteElement = document.createElement("span");
shipImgContainer.className = "span-4-of-12 ship-img";
shipImgContainer.appendChild(shipImg);
shipImg.src = "images/cards/ship/empire/" + ship.imageName;
selectedShipContainer.appendChild(shipImgContainer);
selectedShipContainer.className = "selected-ship-container";
upgradeBar.setAttribute("data-name", ship.name);
//add selected ship to new div
shipNameContainer.className = "span-7-of-12 ship-name";
shipNameContainer.appendChild(shipName);
shipNameContainer.appendChild(deleteElement);
deleteElement.className = "delete ion-trash-a";
deleteElement.setAttribute("data-name", ship.name);
deleteElement.setAttribute("data-points", ship.points);
//using data to make DOM manipulation
selectedShipContainer.setAttribute("data-name", ship.name);

shipName.innerHTML = ship.name;
selectedShipContainer.appendChild(shipNameContainer);
upgradeBar.className = "upgrade-bar";
selectedShipContainer.appendChild(upgradeBar);
const specificUpgrades = Object.keys(ship.upgrades);
for (let up of specificUpgrades) {
    const butt = upgradeButtonMake(up);
    upgradeBar.appendChild(butt);
}
pickedShips.appendChild(selectedShipContainer);
// return throwaway;
return selectedShipContainer;

};

再次，如果这太长/太短/等等，我很抱歉。菜鸟在这里。

【问题讨论】：

这里最好的解决方案是不在 DOM 中存储数据。 DOM 是一个显示层，你应该将你的状态存储在一个内存对象中，并更新 DOM 以反映你的状态的变化

标签： javascript arrays loops object for-loop

【解决方案1】：

您可以创建更具体的绵羊身份例如像

deleteElement.setAttribute("data-id", ship.name + ship.type);

type 是可以更好地指定您的船的任何属性。

然后在这个属性上进行比较

if ($(this).data("id") === chosenFleet.ships[i].name + chosenFleet.ships[i].type) {

【讨论】：

【解决方案2】：

像这样创建一个全局对象

(function (global) {
  global.getUniq = getUniq;
  var id = 0;

  function getUniq() {
    return ++id;
  }
})(window);

这是一个单例，每次调用 getUniq 时，无论有多少客户使用它，都会得到一个唯一标识符。

【讨论】：

“创建一个全局对象--”很多人只是掀桌子，弄坏了他们的笔记本电脑。