Question

这是一个非常基本的抽认卡游戏，您在其中输入问题和主卡答案，然后单击“保存”按钮，将在存储区中创建一个新的抽认卡，作为具有ID的卡片数组中的对象，例如

[{id: 218, question: "who won the NBA finals in 2020", answer: "LA Lakers"}]

同时创建一个新的闪存卡元素，并将其附加到闪存卡div中。通过单击新创建的抽认卡中的删除按钮，特定元素将从本地存储和HTML视图中删除。

我尝试遍历存储中的cards数组和html中的cards数组，并比较id，但是我敢肯定，有一种更简单的方法可以通过单击特定按钮来删除和编辑特定的Card。我在从外部函数调用新创建的元素的元素时遇到问题。

const inputQ = document.querySelector('#input-question')
const inputA = document.querySelector('#input-answer')
const flashCards = document.querySelector('.flash-cards')
const mainCard = document.querySelector('.container')
// btns
const btnAdd = document.querySelector('.add')
const btnClose = document.querySelector('.close')
const btnSave = document.querySelector('.save')



//  open main card
btnAdd.addEventListener('click', (e) => {
  e.preventDefault()
  mainCard.classList.remove('hide')
  mainCard.classList.add('show-card')
})
// close Main Card
btnClose.addEventListener('click', () => {
  mainCard.classList.remove('show-card')
  mainCard.classList.add('hide')
})



function save() {
  if (inputQ.value === '' || inputA.value === '') {
    return false

  } else {
    const id = Math.floor(100 + Math.random() * 900)
    // parse var as an empty cards
    const cards = JSON.parse(localStorage.getItem('cards')) || [];
    // // create new obj from input fields
    const card = {
      id,
      question: inputQ.value,
      answer: inputA.value,
    }
    // push new obj to cards (empty or full)
    cards.push(card);
    // convert cards to string and store in local storage
    localStorage.setItem('cards', JSON.stringify(cards));
    inputQ.value = ""
    inputA.value = ""
    // *** Do not clear the input values here! 
    // or else we will be adding empty strings when we create the new element
    // from another module addCard
  }



}


// https://stackoverflow.com/questions/42219531/how-to-retrieve-data-from-local-storage

function view() {
  if (localStorage.getItem('cards') != null) {
    let cards = JSON.parse(localStorage.getItem('cards'))
    for (let i = 0; i < cards.length; i++) {
      const card = cards[i];
      let newCard = document.createElement('div')

      newCard.className = 'new-card'
      newCard.innerHTML = `
            <p class="card-id hide">${card.id}</p>  
            <p>${card.question}</p>
            <button class="btn show">Show/Hide</button> 
            <p>${card.answer}</p>
            <button class="btn edit">Edit</button>  
            <button onclick= "remove()" class="btn delete">Delete</button>
            `
      flashCards.appendChild(newCard)

    }

  }
}

function remove() {
  let cards = JSON.parse(localStorage.getItem('cards'))
  let cardId = document.querySelector('.card-id')

}

function edit() {

}


btnSave.addEventListener('click', () => {
  save()
  view()
})




//  display cards when loading page (refresh)
window.addEventListener('DOMContentLoaded', () => {
  view()
});

Answer 1

假设您的ID是唯一的...考虑将您的本地存储json字符串编码为对象的对象，而不是对象ID组成键的对象数组...

{
  '218':{id: 218, question: "who won the NBA finals in 2020", answer: "LA Lakers"},
  '219':{id: 219, question: "who was the 1st president", answer: "George Washington"}
}

这将使您可以通过引用ID轻松地从对象中添加/移除新卡，因为这将成为密钥。

您还需要更新循环遍历的代码，例如您的视图函数：

function view() {
  if (localStorage.getItem('cards') != null) {
    let cards = JSON.parse(localStorage.getItem('cards'))
    let cardKeys = Object.keys(cards);
    cardKeys.forEach(key => {
      const card = cards[key];
      let newCard = document.createElement('div')
      newCard.className = 'new-card'
      newCard.innerHTML = `
            <p class="card-id hide">${card.id}</p>  
            <p>${card.question}</p>
            <button class="btn show">Show/Hide</button> 
            <p>${card.answer}</p>
            <button class="btn edit">Edit</button>  
            <button onclick= "remove()" class="btn delete">Delete</button>
            `
      flashCards.appendChild(newCard)
    });
  }
}

如何通过访问元素的ID

1 个答案: