const addToList = function ({ name, id }) {
let html1 = `
<li class="list-item" data-id="${id}" id="${id}">
${name}
<span> </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。
谢谢你!
1条答案
按热度按时间snz8szmq1#
您可以使用querySelector,它动态接受要搜索的ID,例如:
如果存在,则返回元素;如果不存在,则返回null。