如何在網格卡點擊上獲取標題的內部文本？

請幫我從網格卡中獲取標題的內部文本。

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>

如果我通過 Javascript 單擊 grid3 等，如何獲取標題的 innerText ？

uj5u.com熱心網友回復：

假設網格參考div.posts元素，您可以只使用檔案方法querySelectorAll()來檢索所有網格的串列，使用forEach()方法遍歷檢索到的網格串列，然后為每個網格添加一個單擊偵聽器這將檢索標題元素的內部文本。

檢查并運行以下代碼片段以獲取上述方法的實際示例：

const grids = document.querySelectorAll('.posts');

grids.forEach(grid => grid.addEventListener('click', () => {
  console.log(grid.childNodes[1].innerText);
  alert(grid.childNodes[1].innerText);
}));

.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>

uj5u.com熱心網友回復：

我猜我們可以通過事件委托來做到這一點，我只是嘗試了另一種方式tbh

document.querySelector(".container1").addEventListener("click",(e)=>{
   if(e.target && ["DIV","H3"].includes(e.target.tagName)){
        console.log(e.target.innerText)
   }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>

uj5u.com熱心網友回復：

這是可能對您有所幫助的代碼。通過添加 onclick 功能。

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);
}

參考鏈接stackblitz

標籤：javascript 数组 CSS网格

上一篇：在Javascript中運行輸入陣列的總和

下一篇：嵌套串列迭代時，串列中的每個子項都應具有唯一的“鍵”道具