如何获得网格卡上的ninternext点击？

Question

请帮助我从网格卡中获得ninternef。

CSS文件；

.container1 {
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 10px;
  justify-content: space-evenly;
}
.posts {
  width: 13rem;
  margin: 10px auto 10px auto;
  height: 17rem;
  background: white;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  border-radius: 10px;
}

<div class="container1">
  <div class="posts">
    <h3>Heading 1</h3>
  </div>
  <div class="posts">
    <h3>Heading 2</h3>
  </div>
  <div class="posts">
    <h3>Heading 3</h3>
  </div>
  <div class="posts">
    <h3>Heading 4</h3>
  </div>
  <div class="posts">
    <h3>Heading 5</h3>
  </div>
  <div class="posts">
    <h3>Heading 6</h3>
  </div>
</div>

如果我单击Grid3，依此类推，如何通过JavaScript获得直接的直观？

Answer 1

这是可能对您有帮助的代码。通过添加一个单击功能。

html：

<div class="container1">
  <div class="posts">
    <h3 onclick="GetInnerText(this.innerHTML)">Heading 1</h3>
  </div>
  <div class="posts">
    <h3 onclick="GetInnerText(this.innerHTML)">Heading 2</h3>
  </div>
  <div class="posts">
    <h3 onclick="GetInnerText(this.innerHTML)">Heading 3</h3>
  </div>
  <div class="posts">
    <h3 onclick="GetInnerText(this.innerHTML)">Heading 4</h3>
  </div>
  <div class="posts">
    <h3 onclick="GetInnerText(this.innerHTML)">Heading 5</h3>
  </div>
  <div class="posts">
    <h3 onclick="GetInnerText(this.innerHTML)">Heading 6</h3>
  </div>
</div> 

JS：

function GetInnerText(text) {
  console.log(text);
}

参考链接

Answer 2

假设网格参考div.posts元素，您可以只使用文档方法 queryselectorall（）要检索所有网格的列表，请使用 foreach（）方法通过检索到的网格列表进行迭代，然后将单击的侦听器添加到每个网格中，以检索标题元素内部文字。

检查并运行以下代码段，以获取上述方法的实际示例：

const grids = document.querySelectorAll('div.posts');
grids.forEach(grid => grid.addEventListener('click', () => {
  console.log(grid.childNodes[0].textContent);
  alert(grid.childNodes[0].textContent);
}));

.container1 {display: grid; grid-template-columns: auto auto auto auto; column-gap: 10px; justify-content: space-evenly;}
.posts {width: 13rem; margin: 10px auto 10px auto; height: 17rem; background: white; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); border-radius: 10px;}

<div class="container1">
  <div class="posts"><h3>Heading 1</h3></div>
  <div class="posts"><h3>Heading 2</h3></div>
  <div class="posts"><h3>Heading 3</h3></div>
  <div class="posts"><h3>Heading 4</h3></div>
  <div class="posts"><h3>Heading 5</h3></div>
  <div class="posts"><h3>Heading 6</h3></div>
</div>

Answer 3

我们可以通过 event委托书我想我只是尝试过它作为tbh的另一种方法

• 尝试理解，在以这种方式实施之前的评论，请感谢@Roko的宝贵时间提供反馈

document.querySelector(".container1").addEventListener("click",(e)=>{
   if(e.target && e.target.closest(".posts")){
        console.log(e.target.textContent)
   }else{
    return;
   }
})

.container1 {
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 10px;
  justify-content: space-evenly;
}
.posts {
  width: 13rem;
  margin: 10px auto 10px auto;
  height: 17rem;
  background: white;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  border-radius: 10px;
}

<div class="container1">
  <div class="posts">
    <h3>Heading 1</h3>
  </div>
  <div class="posts">
    <h3>Heading 2</h3>
  </div>
  <div class="posts">
    <h3>Heading 3</h3>
  </div>
  <div class="posts">
    <h3>Heading 4</h3>
  </div>
  <div class="posts">
    <h3>Heading 5</h3>
  </div>
  <div class="posts">
    <h3>Heading 6</h3>
  </div>
</div>