如何在 javascript 中定位这些元素？（更多下文）答案

【问题标题】：How could I target these elements in javascript? (more below)如何在 javascript 中定位这些元素？（更多下文）
【发布时间】：2021-04-13 22:34:31
【问题描述】：

我有一些由用户动态创建的待办事项：

<div>
  <h3 class = 'taskTitle'>do homework </h3> 
  <p class = 'taskDate'>Expires: 2021.12.31</p>
   <input type = button class = 'delBtn' value = 'x'></input>
  <input type = button class = 'expandBtn' value = '...'></input>
</div>
<div>
  <h3 class = 'taskTitle'>workout </h3> 
  <p class = 'taskDate'>Expires: 2021.10.11</p>
  <input type = button class = 'delBtn' value = 'x'></input>
  <input type = button class = 'expandBtn' value = '...'></input>
</div>
**etc.**

点击 expandBtn 时会出现一个弹出窗口，其中包含特定待办事项的标题 (h3) 和日期 (p)。脚本：

函数 showDescription(){

const expandBtns= document.querySelectorAll('.expandBtn')
expandBtns.forEach(btn => {
    btn.addEventListener('click', function(event){

        let popUp = document.createElement('div')
        popUp.classList.add('descriptionBox')

        let title = event.target.parentNode.firstChild.textContent **<--says its undefined**
        let date = event.target.parentNode.firstChild.textContent **<--says its undefined**

        popUp.innerHTML = `
            <h3>${title}</h3>
            <p class = 'description'> lorem ipsum  </p>
            <p class = 'dateDescription'>${date}</p>
            <input class = 'delDescription' type = button value = 'x'></input>`
        
        const todos = document.querySelector('#todos')
        todos.appendChild(popUp)

        //close button for popUp
        const delDescription = document.querySelectorAll('.delDescription')
        delDescription.forEach(btn => {
            btn.addEventListener('click', function (event){
                event.target.parentNode.remove()
            })
        })

        // alert(document.querySelector('.activeProject').textContent)
    })
})

}

那么我该如何定位他们呢？ querySelector 也不好，因为我有超过 1 个待办事项。任何帮助表示赞赏！

【问题讨论】：

你考虑过给所有的div 元素一个公共类吗？

标签： javascript html css dom

【解决方案1】：

您可以为所有 div 元素添加唯一的 id 或类。例如：

<div id="to-do-1"><p>Test</p></div>
<button onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
document.getElementById("to-do-1").style.display = "inline";
}
</script>
<style>
#to-do-1 {
display: none;
}
</style>

【讨论】：

【解决方案2】：

全选expandBtn

var btn = document.getElementsByClassName("expandBtn")

为所有这些创建一个循环并添加EventListener

for(let i =0; i < btn.length; i++) { 
  btn[i].addEventListener("click", function () { 
    let h3 = this.parentNode.getElementsByTagName("h3")[0];
    let p = this.parentNode.getElementsByTagName("p")[0];
    alert("h3 = "+ h3.innerText + " & p = " + p.innerText);
  }
}

现在，当用户单击其中任何一个时，它会搜索属于此按钮父级的 h3, p

【讨论】：

【解决方案3】：

使用.children 会得到你想要的：

document.addEventListener("click",ev=>{
  if (ev.target.className!=="expandBtn") return;
  const [name,date]=[...ev.target.parentNode.children].slice(0,2).map(e=>e.textContent)
  console.log(name,date);
  // further code for popup ...
})

<div>
  <h3 class = 'taskTitle'>do homework </h3> 
  <p class = 'taskDate'>Expires: 2021.12.31</p>
  <input type = button class = 'delBtn' value = 'x'></input>
  <input type = button class = 'expandBtn' value = '...'></input>
</div>
<div>
  <h3 class = 'taskTitle'>workout </h3> 
  <p class = 'taskDate'>Expires: 2021.10.11</p>
  <input type = button class = 'delBtn' value = 'x'></input>
  <input type = button class = 'expandBtn' value = '...'></input>
</div>

.firstChild 将返回第一个 childNode，在您的情况下，这将是一个空白和一个换行符，不是您期望的 <h3> 元素。

另一方面，

.children 将返回所有子元素的集合（例如：<div>, <p>, <span>, ... 等），链式 .slice(0,2) 将只切掉前两个元素。

【讨论】：