Как зациклить JavaScript для создания всплывающей формы более 1 контента

Question

Для моего сайта http://wwww.mobileapps.co/, который находится в динамически управляемом php, он извлекает продукты из базы данных. Я также запускаю jquery для создания всплывающих окон для каждого продукта.

Как я могу зациклить мой JavaScript для всех продуктов, я использую следующий код

<ul>
    <script>
   $(document).ready(function() {
    $('.popup0').CreateBubblePopup({
        position: 'top',
        align: 'center',
        innerHtml: '<?php echo $result['
        embeddedcode ']; ?><p style="float:left"><?php echo substr($result['
        appdesc '], 0, 100); ?><img src="images/rate-off.gif" /><img src="images/rate-off.gif" /><img src="images/rate-on.gif" /><img src="images/rate-on.gif" /><img src="images/rate-on.gif" /></p>',
        innerHtmlStyle: {
            color: '#FFFFFF',
            'text-align': 'center'
        },
        themeName: 'all-black',
        themePath: 'images/jquerybubblepopup-theme'
    });
});​
</script>
<?php foreach ($fetchapps->arr as $result): ?>
  <li id="app-<?php echo $result['appid']; ?>" class="popup0">
<div class="icon">
  <a href="app-details.php?result=<?php echo $result['appid']; ?>"><?php echo      $result['embeddedcode']; ?></a>
</div>
<p>
      <a href="app-details.php?result=<?php echo $result['appid']; ?>"><?php echo substr($result['apptitle'], 0, 15); ?></a>
  <span><a href="app-details.php?result=<?php echo $result['appid']; ?>"><?php echo $result['category']; ?></a></span>
  <strong><?php if($result['appprice'] != 'free') echo $result['appprice']; ?></strong>
  <b><?php if($result['appprice']!='free'){ ?>$.<?php } ?><?=$result['appprice']?></b>
</p>
  </li>  
<?php endforeach; ?>
</ul>

Answer 1

Попробуй это..

            $(document).ready(function() {
                // notice what i've added.. 
                // i added a forloop and tried to get the number of popup0 class
                for (var i = 0; i < $('.popup0').length(); i++) {
                    $('.popup0').eq(i).CreateBubblePopup({
                        position: 'top',
                        align: 'center',
                        innerHtml: '<?php echo $result['
                        embeddedcode ']; ?><p style="float:left"><?php echo substr($result['
                        appdesc '], 0, 100); ?><img src="images/rate-off.gif" /><img src="images/rate-off.gif" /><img src="images/rate-on.gif" /><img src="images/rate-on.gif" /><img src="images/rate-on.gif" /></p>',
                        innerHtmlStyle: {
                            color: '#FFFFFF',
                            'text-align': 'center'
                        },
                        themeName: 'all-black',
                        themePath: 'images/jquerybubblepopup-theme'
                    });
                }
            });

надеюсь это поможет

Answer 2

Может этот?

<?php $rid = rand(0, pow(10, 7)); ?>

$(document).ready(function() {
    $('.<?php echo $rid; ?>').CreateBubblePopup({
        ....
    });
});

markup ...

<li id="app-<?php echo $result['appid']; ?>" class="popup0 <?php echo $rid; ?>">