如何具有多個具有相同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

當您將相同的ID分配給多個元素時，就會發生這種情況。 實際上，當您嘗試使用ID代碼調用元素時，只會調用第一個元素。

因此，要消除此錯誤，有多種解決方案：

使用類名並通過循環分配事件
使用不同的ID
使用標簽訪問元素，並檢查其ID是否為您分配的ID。

該頁面提到了解決問題所需的一切。

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 個解決方案

解決方案1
2 2018-07-11 13:52:23

解決方案2
2 2018-07-11 13:53:37

解決方案3
0 2018-07-11 14:07:36

如何具有多個具有相同ID值的按鈕，並且單擊任何按鈕時都應該彈出窗口？

問題描述

3 個解決方案

解決方案1 2 2018-07-11 13:52:23

解決方案2 2 2018-07-11 13:53:37

解決方案3 0 2018-07-11 14:07:36

解決方案1
2 2018-07-11 13:52:23

解決方案2
2 2018-07-11 13:53:37

解決方案3
0 2018-07-11 14:07:36