css 检查元素是否包含具有数据ID的子元素

pbpqsu0x  于 2022-12-05  发布在  其他
关注(0)|答案(1)|浏览(140)
const addToList = function ({ name, id }) {
  let html1 = `
  <li class="list-item" data-id="${id}" id="${id}">
  ${name}
  <span>&nbsp</span>
  <button class="btn-remove">remove</button>
  </li>
  `;
  pokemonList.insertAdjacentHTML('beforeend', html1);
};

const displayListItem = function () {
  favourite.forEach((listItem) => {
    addToList(listItem);
  });
};

let favourite = getStorageItem('pokemon');
pokemonContainer.addEventListener('click', function (e) {
  if (e.target.classList.contains('btn-favourites')) {
    favourite = getStorageItem('pokemon');
    let eTargetID = parseInt(e.target.dataset.id);
    let found = favourite.some((el) => el.id === eTargetID);
    console.log(found);
    console.log(eTargetID);
    if (!found) {
      favourite.push(pokemonArray[e.target.dataset.id - 1]);
      setStorageItem('pokemon', favourite);
      // behöver lösa duplcates i favorit listan
      displayListItem(favourite);
    }
  }
});

如何检查是否存在具有数据集id的子元素?如果li标签已经存在,并且具有特定的数据集id,那么当我点击按钮从本地存储中获取子元素时,我希望防止重复的子元素出现在我的收藏夹列表中。
现在,当我点击比如说bulbasaur,我的列表中会出现bulbasaur。如果我点击ivysaur,我会出现bulbasaur,bulbasaur,ivysaur。
谢谢你!

snz8szmq

snz8szmq1#

您可以使用querySelector,它动态接受要搜索的ID,例如:

document.querySelector(`[data-id="${datasetId}"]`)

如果存在,则返回元素;如果不存在,则返回null。

相关问题