單擊父div時如何獲取輸入的確切值

Question

假設下面的代碼是從數據庫中划出的，除了值之外，所有內容都相同，如何在不影響其他人的情況下獲得任何一個點擊的值？

<div class="mind">
  <a href="#"><span class="r">Home</span></a> 
  <input class="input1" type="hidden" value="123">
</div>    
<div class="mind">
  <a href="#"><span class="t">Create User</span></a> 
  <input class="input1" type="hidden" name="rank" value="abc">
</div> 
<div class="mind">
  <a href="#"><span class="t">List Users</span></a>
  <input class="input1" type="hidden" name="rank" value="abc">
</div>   
<div class="mind">
  <a href="#"><span class="t">Admin</span></a> 
  <input class="input1" type="hidden" name="rank" value="abc">
</div>

Answer 1

香草JS，ES6

• 在文檔中按類名查找元素
• 對於每個元素附加 onclick
• 進入 onclick 后，按此元素中的標簽名稱查找元素
• 使用第一個來獲取價值

 let minds = document.getElementsByClassName('mind'); [...minds].forEach(x => { x.onclick = () => { let i = x.getElementsByTagName('INPUT')[0]; console.log(i.value) } });

 <div class="mind"> <a href="#"><span class="r">Home</span></a> <input class="input1" type="hidden" value="123"> </div> <div class="mind"> <a href="#"><span class="t">Create User</span></a> <input class="input1" type="hidden" name="rank" value="abc1"> </div> <div class="mind"> <a href="#"><span class="t">List Users</span></a> <input class="input1" type="hidden" name="rank" value="abc2"> </div> <div class="mind"> <a href="#"><span class="t">Admin</span></a> <input class="input1" type="hidden" name="rank" value="abc3"> </div>