javascript - 如何让多个按钮具有相同的 id 值，并且当单击任何按钮时应该弹出窗口？

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

您的 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 事件委托(delegate)。