Question

我有多个具有相同元素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>

Answer 1

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

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

使用类名并通过循环分配事件
使用其他ID
使用标签访问元素，并检查其ID是否为您分配的ID。

此page提到了解决问题所需的一切。

Answer 2

您应该为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事件委托。

Answer 3

不建议对多个元素使用相同的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');
      });
});

*

如何具有多个具有相同ID值的按钮，并且单击任何按钮时都应该弹出窗口？

3 个答案: