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元素实例在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样式框架之一。

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

1 个答案: