时间戳

首页 > 解决方案 > 在javascript中获取具有相同ID的不同值

javascript - 在javascript中获取具有相同ID的不同值

问题描述

html

<c:forEach var="legList" items="${legList}">/* iterating over ledger name and 
                                                  ledger id */                  
   <tr>
        <td>
        <input type="hidden" class="legid" name="legid" id=legid
        value=${legList.ledgerId}>
        <a onclick=display(document.getElementById('legid').value)
        href='#myModal' role="button" data-toggle="modal">${legList.ledgerName}</a>
        </td>
    </tr>

Javascript 

var display = function(id){
alert(id);  //want to get id of clicked ledger name
}

但这里的问题是我在单击所有链接时得到相同的 id，我知道为什么会发生这种情况，因为我们无法获得具有相同 id 的值。所以我的问题是，当 id 在 for 循环内部发生变化时，如何在这里获得不同的 ID。希望我的问题很清楚。

标签： javascript

解决方案

ids在文档中必须是唯一的。如果您通过让多个元素具有相同id的getElementById.

a相反，使用您的元素实例在 中可用this的事实onclick，并使用它通过 DOM 找到它input旁边的下一个（可能previousElementSibling在这种情况下使用）：

<a onclick="display(this.previousElementSibling.value)" ...

例子：

function display(value) {
  alert("value is: " + value);
}
<table>
  <tbody>
    <tr>
      <td>
      <input type="hidden" class="legid" name="legid" value="value1">
      <a onclick=display(this.previousElementSibling.value)
      href='#myModal' role="button" data-toggle="modal">Value 1</a>
      </td>
    </tr>
    <tr>
      <td>
      <input type="hidden" class="legid" name="legid" value="value2">
      <a onclick=display(this.previousElementSibling.value)
      href='#myModal' role="button" data-toggle="modal">Value 2</a>
      </td>
    </tr>
    <tr>
      <td>
      <input type="hidden" class="legid" name="legid" value="value3">
      <a onclick=display(this.previousElementSibling.value)
      href='#myModal' role="button" data-toggle="modal">Value 3</a>
      </td>
    </tr>
  </tbody>
</table>

一般来说，我建议不要使用onclick，而是使用现代事件处理或许多流行的 MVC 样式框架之一。

推荐阅读