Javascript jQuery弹出框在foreach循环中仅显示一次

首先，让我解释一下弹出窗口的用途。我有一个来自产品数据库的列表，在foreach循环中

现在我添加了代码，这样当您单击产品时，它会打开一个新框并显示有关该产品的内容。但由于某些原因，它只对第一个产品有效

我将在这里发布代码，因为我非常不擅长jQuery/Javascript。 以下是jquery脚本：

;(function($) {
     // DOM Ready
    $(function() {
        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#wiki-button').on('click', function(e) {
            // Prevents the default action to be triggered. 
            e.preventDefault();
            // Triggering bPopup when click event is fired
            $('#wiki-content').bPopup();
        });
    });
})(jQuery);

循环中的一个片段：

foreach ($getTheOffers as $getTheOffer ) { ?>
<div id="wiki-content">
        <div class="box9">
            <h1>Sample Box</h1>   
                <img src="imageurl">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.</p><br/>
        </div>
    </div>
    <?php } ?>

foreach（$getTheOffers作为$getTheOffer）{？>
样品盒
洛雷姆·伊普斯姆·多洛尔（Lorem ipsum Door sit amet）是一位杰出的政治家。南·卢克图斯·多洛尔（Nam luctus Concertetur Door a porttitor）。库拉比图尔（Curabitur）是一位杰出的政治家和政治家。他是一位杰出的政治家，他是一位杰出的政治家

---

如果您需要查看更多代码，我将在pastebin中发布。

问题：

您有重复的ID。ID选择器只需要一个结果，并为您提供一个，即第一个元素。因此，只有第一个元素起作用

解决方案：

---

使用类！为重复元素指定一个公共类，并将其作为目标。

将id更改为class。id应唯一，否则将只选择第一个元素

;(function($) {
     // DOM Ready
    $(function() {
        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('.wiki-button').on('click', function(e) {
      //___^_____________    
            // Prevents the default action to be triggered. 
            e.preventDefault();
            // Triggering bPopup when click event is fired
            $('.wiki-content').bPopup();
         // ___^___________
        });
    });
})(jQuery);

foreach ($getTheOffers as $getTheOffer ) { ?>
<div class="wiki-content">
<!-- _____^____________________-->
        <div class="box9">
            <h1>Sample Box</h1>   
                <img src="imageurl">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.</p><br/>
        </div>
    </div>
    <?php } ?>

foreach（$getTheOffers作为$getTheOffer）{？>
样品盒
洛雷姆·伊普斯姆·多洛尔（Lorem ipsum Door sit amet）是一位杰出的政治家。南·卢克图斯·多洛尔（Nam luctus Concertetur Door a porttitor）。库拉比图尔（Curabitur）是一位杰出的政治家和政治家。他是一位杰出的政治家，他是一位杰出的政治家

使用

class

而不是

id

所以，在你的HTML中

<div class="wiki-content">

---

id为“wiki button”的HTML元素在哪里？

$('.wiki-button').on('click', function(e) {
    // Prevents the default action to be triggered. 
    e.preventDefault();
    // Triggering bPopup when click event is fired
    $(this).bPopup();
}