如何拥有多个id值相同的按钮，当点击任何按钮时，弹出窗口都会出现

我有多个元素id相同的按钮，但当我点击第一个按钮时，弹出窗口就来了。如果我点击任何其他按钮，弹出窗口都不会出现。我怎样才能使它成为可能。

<form method="post" action="trial.php">
<!-- Trigger/Open The Modal -->
<input type="button" id="myBtn" value="assign"></input>
<input type="button" id="myBtn" value="asd"></input>
<input type="button" id="myBtn" value="assign"></input>
<input type="button" id="myBtn" value="assign"></input>
<input type="button" id="myBtn" value="assign"></input>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Assign Project</p>
<hr style="height:0.25px; background:black;"></hr>
<div class="container">
<div class="row">
<p class="col-md-10"><br/>Assign Project to a Existing Team : 
<a class="btn btn-primary" id="ExistingTeam" value="Existing Team" href="google.com">Existing Team</a></p>
</div>
<div class="row">
<p class="col-md-10"><br/>Create a new Team and Assign Project : 
<a class="btn btn-primary" id="CreateTeam" value="Create Team" href="google.com">Create Team</a></p>  
</div>
</div>
</div>
</div>
</form>

这是我用于弹出的javascript

<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

您的HTML元素应该有唯一的id。为了实现您想要的目的，通常的做法是使用一个以js为前缀的伪css类，以便向代码的读者表明这个类在js脚本中使用。

var buttons = document.getElementsByClassName('jsBtn');
for(var i=0; i<buttons.length; i++){
buttons[i].addEventListener("click", function(){ console.log("Hello"); })
}

<input type="button" id="btn1" class="jsBtn" value="button1"/>
<input type="button" id="btn2" class="jsBtn" value="button2"/>

更好的方法是将所有按钮放在一个div中，并将伪css类分配给这个div

var btnContainer = document.getElementsByClassName("jsBtnContainer");
btnContainer[0].addEventListener("click", function() { console.log("Hello"); });

<div class="jsBtnContainer">
<input type="button" id="btn1" class="jsBtn" value="button1"/>
<input type="button" id="btn2" class="jsBtn" value="button2"/>
</div>

这样做，您将只有一个事件侦听器，而不是n侦听器，其中n是文档中的按钮数。更少的侦听器意味着页面加载性能更好，因为需要注册的侦听器更少。

上述技术称为DOM事件委派。

当您将相同的ID分配给多个元素时，就会发生这种情况。实际上，当您尝试使用id代码调用元素时，只调用第一个元素。

因此，要消除这个错误，有多种解决方案：

使用类名并通过循环分配事件
使用不同的ID
使用标记访问元素，并检查其id是否为您指定的id

本页已经提到了解决问题所需的一切。

不建议对多个元素使用相同的id。将id替换为class属性。我已经做了一个示例代码，它将给你一个关于编码部分的简要想法。请查收。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Learn Javascript</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<form action="">
<input type="button" value="button 1" class="myBtn">
<input type="button" value="button 2" class="myBtn">
</form>
</body>
</html>
jQuery(document).ready(function(){
jQuery('.myBtn').on('click', function(){
alert('You have clicked');
});
});

相关内容

最新更新

热门标签：