javascript - 在javascript中使用相同的id获取不同的值

Question

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。希望我清楚我的问题。

Answer 1

id必须在文档中是唯一的。如果您通过使用具有相同 id 的多个元素来打破该规则，则结果将是正式未定义的(尽管实际上，当您使用 getElementById 时，浏览器会为您提供第一个结果)。

相反，请使用您的 a 元素实例在 onclick 中可用作 this 的事实，并使用它来查找 input 旁边的 DOM(在本例中可能使用 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 样式框架之一。