Как назначить DOM созданным объектам уникальные идентификаторы?

Question

Это мой первый вопрос, поэтому извиняюсь, если он недостаточно конкретен или отсутствуют критические детали.

Я изучаю JS через учебные пособия и применяю его для построения того, что приравнивается к сборщику колод.

Появляется куча карт, вы выбираете одну, и она добавляется в колоду.Эти карты превращаются в объекты и добавляются в массив, представляющий карты, выбранные для добавления в колоду.

Моя проблема возникает, когда в колоду помещается несколько одинаковых карт, и вы хотите удалить их.только один из них. Я не могу нацелиться только на один, потому что все мои операторы сравнения подхватывают оба экземпляра.

Вот мой репозиторий на Github, если он не был достаточно хорошо объяснен: https://github.com/caldwell619/armada-fleet/tree/data-attr

В частности, вот фрагменты, с которыми я борюсь:

Удаление корабля из массива 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);

Все уникальные идентификаторы оказываются одинаковыми, потому что каждый раз, когда запускается прослушиватель событий, элементы HTML перезаписываются на основетекущее состояние массива ships.

Функция, которая создает 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;

};

Опять же, если это слишкомдлинные / слишком короткие / и т.д., мои извинения.Нуб здесь.

Answer 1

Вы можете создать более конкретную личность овец например, что-то вроде

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

type - это любой атрибут, который лучше определяет ваш корабль.

, а затем сравнить на этом атрибуте

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

Answer 2

Создайте глобальный объект, такой как

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

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

Это одиночный объект, и каждый раз, когда вы вызываете getUniq, вы получаете уникальный идентификатор независимо от того, сколько клиентов его используют.