时间戳

首页 > 解决方案 > 如何有多个相同 id 值的按钮，当点击任何按钮时，弹出窗口应该来？

javascript - 如何有多个相同 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>

标签： javascripthtml

解决方案

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

推荐阅读