0

jquery を使用して、Web サイトhttp://www.mobileapps.coのポップアップ バブル ヒントを作成していました。これはモバイル アプリケーションの Web サイトであり、動的に駆動されます。ホームページのすべての製品について、次のコードを使用していますが、一部の製品でバブル ポップアップが表示されません。

<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にクラスを追加します（IDなし）。次に、liをループします

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

ポップアップのコンテンツを取得するには、情報とともにliの非表示のdivにコンテンツを配置することをお勧めします。

たとえば、あなたの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 に答える