Question

在选中复选框时，我尝试创建div框，而在取消选中时，则将其动态删除。

我知道用React我可以在2分钟内做到这一点，但我正在尝试学习Vanilla JS方式

我遇到的当前问题：

选中复选框时，它呈现的元素多于一个。
例如，取消选中复选框时，仍会呈现所有一个元素。

END GOAL：根据state变量中的内容动态添加和删除Div框，（console.log的输出应提供外观上的指导），但还要确保没有多余的框正在使用/渲染。

window.onload = () => {
  const checkbox = document.querySelectorAll('.checkbox')
  let state = []

  for (idx of checkbox) {
    idx.addEventListener('change', (e) => {
      if (e.currentTarget.checked === true) {
        state.push(e.currentTarget.id)
        renderOnDom(state, 'add', e.currentTarget.id) // Experimenting
      }
      if (e.currentTarget.checked === false) {
        state = state.filter((item) => item !== e.currentTarget.id)
        renderOnDom(state, 'remove', e.currentTarget.id) // Experimenting
      }
      console.log('state', state)
    })
  }
}

const renderOnDom = (el, option, id) => {
  if (option === 'add') {
    el.map((item, idx) => {
      const div = document.createElement('div')
      div.setAttribute('key', item)
      div.className = 'test'
      div.innerHTML = `Box ${item}`
      document.querySelector('#projects').appendChild(div)
    })
  }

  if (option === 'remove') {
    const test = document.querySelectorAll('.test')
    const prod = document.querySelector('#projects')
    for (const iterator of test) {
      if (iterator.attributes.key.value === id) {
        prod.removeChild(prod.firstChild)
      }
    }
  }
}

<input id="id1" data="name1" class="checkbox" type="checkbox" />
      <label for="id1">Test 1</label>

      <input id="id2" data="name2" class="checkbox" type="checkbox" />
      <label for="id2">Test 2</label>

      <input id="id3" data="name3" class="checkbox" type="checkbox" />
      <label for="id3">Test 3</label>

      <div id="projects"></div>

Answer 1

嘿，我已经更新了您的代码片段以执行我认为您想做的事情。

简而言之，真相的来源是state数组。因此，在对其进行任何更改之后，请使用resetDom()重设dom，然后触发renderOnDom()。

window.onload = () => {
  const checkbox = document.querySelectorAll('.checkbox')
  let state = []

  for (idx of checkbox) {
    idx.addEventListener('change', (e) => {
      if (e.currentTarget.checked === true) {
        state.push(e.currentTarget.id)
      }
      if (e.currentTarget.checked === false) {
        state = state.filter((item) => item !== e.currentTarget.id)
      }
      renderOnDom(state, e.currentTarget.id)
    })
  }
}
const resetDom = () => {
  const projects = document.querySelector("#projects");
  while (projects.firstChild) {
    projects.removeChild(projects.firstChild)
  }
}
const renderOnDom = (el, id) => {
  resetDom();
  el.forEach((item, idx) => {
    const div = document.createElement('div')
    div.setAttribute('key', item)
    div.className = 'test'
    div.innerHTML = `Box ${item}`
    document.querySelector('#projects').appendChild(div)
  })

}

<input id="id1" data="name1" class="checkbox" type="checkbox" />
<label for="id1">Test 1</label>

<input id="id2" data="name2" class="checkbox" type="checkbox" />
<label for="id2">Test 2</label>

<input id="id3" data="name3" class="checkbox" type="checkbox" />
<label for="id3">Test 3</label>

<div id="projects"></div>

Vanilla JS动态添加或删除div框

1 个答案: