Question

我想显示第一个输入框的值，当我点击第一个删除链接并显示第二个输入框的值时，当我点击第二个删除链接时使用相同的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" >

Answer 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>

Answer 2

对于这些情况，

可能会停止使用id，只需在html中使用保留字this和js传递被单击作为函数参数的元素，以获取值属性即可使用getAttribute ('value')

＆＃13;

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

＆＃13;

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

＆＃13;

要有一个更易于管理的代码，理想的是从JS添加函数而不在HTML中使用，但是有必要添加一个类来引用它们（linkdel） < / p>

＆＃13;

function delChat() {
  let id = this.getAttribute('value');
  console.log(id);
}

var links = document.querySelectorAll('.linkdel');
links.forEach(function(el){
  el.addEventListener('click',delChat,false);
})

＆＃13;

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

＆＃13;

Answer 3

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

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>

如何使用JS

3 个答案: