Question

首先，让我解释弹出窗口的目的。我在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 } ?>

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

Answer 1

<强>问题：

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

<强>解决方案：

使用课程！为您的重复元素提供一个公共类，并将其作为目标。

Answer 2

将 ID 更改为类。 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 } ?>

Answer 3

使用class代替id

所以，在你的HTML

中

<div class="wiki-content">

在你的jQuery中

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

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

3 个答案: