0

我正在使用 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>
4

1 回答 1

0

你不应该像那样循环javascript，这太疯狂了。向 li like popup 添加一个类（没有 ID）。然后循环 li 的

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

要获取弹出窗口的内容，我建议您将其放在包含信息的 li 中的隐藏 div 中。

比如loop you li的

<?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'
  });
});

我希望这是有道理的。

于 2012-03-15T10:50:08.277 回答