createbubblepopup jQuery

Question

我正在使用jquery为我的网站http://www.mobileapps.co创建弹出气泡提示。 它是一个移动应用程序网站，并且动态运行。对于主页上的所有产品，我正在使用以下编解码器，但某些产品没有弹出气泡。

<ul>

<?php  foreach($fetchapps->arr as $result){ ?>
<script>
    $(document).ready(function(){
        $('.popup0<?=@$result['appid']?>').CreateBubblePopup({
                                    position : 'top',
                                    align    : 'left',
                                    innerHtml: '<?=@$result['embeddedcode']?><p style="float:left"><?=@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>

<li class="popup0<?=@$result['appid']?>">
  <div class="icon"><a href="app-details.php?result=<?=(@$result['appid'])?>"><?=$result['embeddedcode']?></a></div><p><a href="app-details.php?result=<?=(@$result['appid'])?>"><?=substr(@$result['apptitle'],0,15)?></a>

  <span><a href="app-details.php?result=<?=(@$result['appid'])?>"><?=$result['category']?></a></span>

  <b><?php if($result['appprice']!='free'){ ?>$.<?php } ?><?=$result['appprice']?></b>

</p></li><?php } ?>

</ul>

Answer 1

您永远不应该那样循环javascript，这太疯狂了。 将类添加到li像弹出窗口（不带ID）。 然后循环李的

$('li.popup').each(function () {
  //define content for the popup
  $(this).CreateBubblePopup....
});

为了获得弹出窗口的内容，我建议您将其与信息一起放在li的隐藏div中。

例如，循环你的

<?php foreach ($fetchapps->arr as $result): ?>
  <li id="app-<?php echo $result['appid']; ?>" class="popup">
    <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>
    </p>
  </li>
<?php endforeach; ?>

那就是你现在所拥有的，并且在那个li中放置了一个隐藏的（隐藏在css中）div，其中包含弹出信息：

<div class="popup-content">    
  <?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>
</div>

然后，在主体底部（最好在外部文件中）放入js：

$('li.popup').each(function () {
  var $this        = $(this),
      popupContent = $this.children('.popup-content').html();
  $(this).CreateBubblePopup({
    position : 'top',
    align    : 'left',
    innerHtml: popupContent,
    innerHtmlStyle: {
      color:'#FFFFFF', 
      'text-align':'center'
    },
    themeName:  'all-black',
    themePath:  'images/jquerybubblepopup-theme'
  });
});

我希望这是有道理的。