Question

我有一个模态，我想用两个具有不同ID的按钮来调用。原因是一个按钮显示在桌面上，另一个按钮显示在移动视图上（响应）。 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，目的只是为了提供一些潜在的机会。

谢谢！

Answer 1

您可以使用此功能：

<div class="insertClass" id="myBtnMobile" onclick="yourfunction()">Modal</div>
<div class="insertClass" id="myBtn" onclick="yourfunction()">Modal</div>

或

document.getElementById("myBtnMobile").addEventListener("click", yourfunction);
document.getElementById("myBtn").addEventListener("click", yourfunction);

或使用

<button class="...">

不是

<button id="...">.

另一个可能的解决方案：

var buttons = document.getElementsByClassName('insertClass');
for (var i = 0; i < buttons.length; i++)
{
    buttons[i].onclick = function() {
        document.getElementById('myModal').style.display = 'block';
    }
}

https://jsfiddle.net/43gkcm92/24/

Answer 2

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>

Answer 3

您可以通过这种方式以相同的动作触发两个ID

$('#myBtnMobile,#myBtn').click(function () {
      // your logic
});

Answer 4

您需要访问类而不是ID：

document.getElementsByClassName("insertClass");

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

4 个答案: