jQuery 多个 getElementByID

Question

我在显示弹出窗口时遇到问题。我有 2 个弹出窗口。它们是通过 php foreach 生成的（在 echo 中）...问题是，每次只会在页面上显示 FIRST 跨度，但 SECOND 不起作用。 PHP代码在这里：

echo __( "<div class='action' style='margin-bottom: -20px'>
            <div id='box' style='background-color:". $active_row->color .";width: 10px;height:10px;float:left;margin:5px 10px 0px 10px;'> </div>
            <span id='myBtn' style='color:orange'> ". $active_row->title ."<span id='GoogleADD' style='float:right; color:orange; text-decoration:underline'> Add </span> </span> <span id='end' style='float:right; margin-right: 10px'>". $endDateString ."</span> <span style='float:right'>  -  </span> <span id='start' style='float:right; margin-left:10px'> ". $newDateString ." </div> <!-- Trigger/Open The Modal -->

            <!-- The Modal -->
            <div id='myModal' class='modal'>

              <!-- Modal content -->
              <div class='modal-content'>
                <div class='modal-header'>
                  <span class='close'>×</span>
                  <h2 style='text-align:center'>Podrobnosti o akci</h2>
                </div>
                <div class='modal-body'>
                  <p> Název akce: <b>". $active_row->title ."</b> </p>
                  <p> Podrobnosti: <b>". $active_row->description ." </b> </p>
                  <p> Začátek akce: <b>". $newDateString ." </b> </p>
                  <p> Konec akce: <b>". $endDateString ." </b> </p>
                  <p> Přidat akci do vašeho Google Kalendáře: <b style='color: orange; text-decoration: underline'> ADD ME! </b> </p> 
                </div>
                <div class='modal-footer'></div>
              </div>
            </div>");

然后我有一个脚本，当有人点击它们时，我想在其中显示它们。我在这里检查“第三”行的 ID (span id="myBtn")。

这是我的 jQuery 脚本。

<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

我认为这将帮助您实现目标。我已从您的示例中删除了一些不需要的细节，并尝试使其尽可能简单。

<div class='action' >
    <span class="MyBtn" rel="myModal1" style='color:orange'>Title 1</span>
</div> 
<!-- The Modal 1 -->
<div id='myModal1' class='modal' style="display:none">
    <!-- Modal content 1 -->
    <div class='modal-content'>
        <div class='modal-header'>
            <span class='close'  rel="myModal1"  >X</span>
            <h2 style='text-align:center'>Popup 1 header</h2>
        </div>
        <div class='modal-body'>'Popup 1 content goes here...'</div>
        <div class='modal-footer'></div>
    </div>
</div>



<div class='action' >
    <span class="MyBtn" rel="myModal2" style='color:orange'>Title 2</span>
</div> 
<!-- The Modal 2 -->
<div id='myModal2' class='modal' style="display:none">
    <!-- Modal content 2-->
    <div class='modal-content'>
        <div class='modal-header'>
            <span class='close'  rel="myModal2" >X</span>
            <h2 style='text-align:center'>Popup 2 header</h2>
        </div>
        <div class='modal-body'>'Popup 2 content goes here...'</div>
        <div class='modal-footer'></div>
    </div>
</div>

上面的 html 部分可以在任何循环结构的帮助下生成。请注意，我在 rel 属性中的两个不同位置写了模态容器的 id。

1. 在带有 MyBtn 类的 span 标记中。
2. 在 span 标记中具有关闭类。

您需要为您的模态容器生成唯一的 id，并且也应该写在那里。 （可以使用$active_row->ID，序列号）

这是打开和关闭模态框的脚本。

<script type="text/javascript">
    var button_click = function() {
        var ModalID = this.getAttribute("rel");
        document.getElementById(ModalID).style.display = 'block';
    };

    var close_click = function() {
        var ModalID = this.getAttribute("rel");
        document.getElementById(ModalID).style.display = 'none';
    };


    // Get the button that opens the modal
    var btn = document.getElementsByClassName('MyBtn');

    // Get the <span> element that closes the modal
    var close = document.getElementsByClassName('close') ;

    // Assign the events to the buttons (open & close)
    for(iCount = 0; iCount < btn.length; iCount++) {
        btn[iCount].addEventListener('click', button_click, false) ;
        close[iCount].addEventListener('click', close_click, false) ;
    }
</script>

我希望它能提供足够的帮助。

玩得开心。