javascript - 使用两个 ID 触发相同的操作

Question

我有一个模式，我想用两个具有不同 ID 的按钮来调用它。原因是一个按钮显示在桌面上，另一个显示在移动 View (响应)上。 display: none 确实实现了使用相同 ID 两次的技巧。

模态:

<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="closecross">&times;</span>
    <!-- Modal content -->
    <div class="modal-content">
        <p>Content</p>
    </div>
</div>

作为 JS 的模态:

// 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("closecross")[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";
        }
    };

我的两个按钮:

<div class="insertClass" id="myBtnMobile">Modal</div>

和

<div class="insertClass" id="myBtn">Modal</div>

我尝试使用 getElementsByClassName('.myBtnMobile','.myBtn') 但它不适用于我的 JS。

我使用的代码来自https://www.w3schools.com/howto/howto_css_modals.asp只是为了提供一些潜在的 Playground 。

提前致谢!

Answer 1

Working fiddle

你可以使用 queryselectorAll() :

var divs = document.querySelectorAll('#myBtnMobile,#myBtn');

divs.forEach(function(div) {
  div.addEventListener("click", clickEvent);
});

function clickEvent() {
  console.log('Div ' + this.id + ' Clicked');
}

<div id="myBtnMobile">Modal</div>
<div id="myBtn">Modal</div>