jQuery 多个 getElementByID

Posted 2023-02-22

【中文标题】jQuery 多个 getElementByID

【英文标题】：jQuery multiple getElementByID

【发布时间】：2016-10-07 14:47:30

【问题描述】：

我在显示弹出窗口时遇到问题。我有 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>"

你能帮帮我吗？非常感谢！

【问题讨论】：

“id”属性应该是唯一的 - 有两个或多个具有相同 id 的元素是错误的。

@Pointy 所说的——如果你使用类，你可以使用getElementsByClassName()

我试过了，但我不能做一个唯一的 id...

那不是 jquery。那只是javascript。如果您使用的是 jquery，您将使用 $('#myModal) 而不是输入完整的 getWhatever() 函数名称。

说你不能做一个唯一的ID意味着（a）你需要找到一种方法；或 (b) 您需要使用 ID 以外的其他内容。两个重复的 ID 违反了 w3c 标准——这是有充分理由的。

【参考方案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。

在带有 MyBtn 类的 span 标记中。 在 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>

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

玩得开心。