如何使用JS获取具有相同ID的元素的值答案

【问题标题】：How to get value of elements with same id using JS如何使用JS获取具有相同ID的元素的值
【发布时间】：2018-06-05 21:20:12
【问题描述】：

我想在单击第一个删除链接时显示第一个输入框的值，并在单击第二个删除链接时使用相同的 ID 显示第二个输入框的值，但它总是发送首先删除链接的值。

function delChat() {
   var id = document.getElementById('delmsg').value;
   alert(id);
}

<a href="#" onclick="delChat()">Delete?</a>
<input type="hidden" value="1352" id="delmsg" >
<br />
<a href="#" onclick="delChat()">Delete?</a>
<input type="hidden" value="1350" id="delmsg" >

【问题讨论】：

您不能拥有多个具有相同 id 的元素。
对多个元素使用类。 ID 是唯一的

标签： javascript jquery html ajax xmlhttprequest

【解决方案1】：

您不能对两个不同的元素使用相同的 id。页面上的每个元素都应该有唯一的 id。

但是如果你不能改变id，那么你应该这样获取属性：

function delChat(el) {
   console.log(el.getAttribute('value') + " clicked");
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.open('GET', 'delete.php?id='+el.getAttribute('value'), true);
   xmlhttp.send();
}

<a href="#" id="delmsglink" onclick="delChat(this)" value="1352">Delete?</a>
<br />
<a href="#" id="delmsglink" onclick="delChat(this)" value="1350">Delete?</a>

【讨论】：

我无法更改 id... 因为它是循环打印的
我想获取点击链接的值，然后将其发送到 php，以便它可以删除 id 等于链接值的行
@Dev.Joel 你是对的，但根据 OP，他不能更改 id。我已经提过了。

【解决方案2】：

ids 必须是唯一的。最好的选择是使用一个类并将事件侦听器附加到每个元素。您可以在事件监听器调用的函数中使用this 来指向被点击的元素。此外，value 不是 a 的有效属性，因此请改用数据属性：data-value - 可以通过元素的 dataset 对象访问数据属性的值。

function delChat() {
  var id = this.dataset.value;
  console.log(id);
}

const buttons = document.querySelectorAll('.del');
buttons.forEach(button => button.addEventListener('click', delChat, false));

<a href="#" class="del" data-value="1352">Delete?</a>
<br />
<a href="#" class="del" data-value="1350">Delete?</a>

【讨论】：

【解决方案3】：

在这些情况下可以停止使用 id ，只需在带有保留字 this 的 html 和 js 中将被单击的元素作为函数的参数传递就足够了，以获取您可以的 value 属性使用getAttribute ('value')

function delChat(el) {
  let id = el.getAttribute('value');
  console.log(id);
  
}

<a href="#" onclick="delChat(this)" value="1352">Delete?</a>
<br />
<a href="#" onclick="delChat(this)" value="1350">Delete?</a>

为了拥有更易于管理的代码，最好从 JS 添加函数而不在 HTML 中使用，但需要添加一个类来引用它们(linkdel)

function delChat() {
  let id = this.getAttribute('value');
  console.log(id);
}

var links = document.querySelectorAll('.linkdel');
links.forEach(function(el){
  el.addEventListener('click',delChat,false);
})

<a href="#" class="linkdel" value="1352">Delete?</a>
<br />
<a href="#" class="linkdel" value="1350">Delete?</a>

【讨论】：