php - jQuery 在 PHP While 循环中显示 div

Question

我在尝试在 PHP while 循环中使用 jQuery 在 div 标签中显示信息时遇到了一些问题。

我的代码如下所示：

$i=1;
    while($pack = mysql_fetch_array($packs)) 
        {
$pricepack = $price * $pack['refcount'];
$pricepack = number_format($pricepack,2);

if($users > $pack['refcount'] ) {
$contents .= "

  <a class='refbutton' style='text-decoration:none;' onclick=\"document.rent.refs.value='{$pack['refcount']}';document.rent.submit(); return false;\" >{$pack['refcount']}</a>

<div id='refinfo' style='display:none;'>

<span style='font-size:18pt;font-weight:bold;' id='refprice'></span><br />
<span style='color:#D01F1E;'>You don't have enough funds for this package.</span>
  </div>
<script type='text/javascript'>
   $(document).ready(function() {
     $('.refbutton').hover(
function() {                         
  $('#refinfo').show();
   $('#refprice').text(\"$\"+\"$pricepack\");

  },
function() {
  $('#refinfo').hide()
   }
  );
});

</script>


";
   $i++;
  }
}  

问题是代码div在每个锚元素旁边生成一个。当鼠标悬停时，这将导致：

我想要获得的是在每个按钮悬停时：

正如您在第二张图片中看到的那样，没有任何设计错误或混淆。我怎样才能得到这个？

谢谢你。

Answer 1

您需要从清理代码开始。您只需要一个 refinfo div 和一个 javascript 块。循环中唯一的东西应该是 refbutton，并且该标签应该包含 javscript 悬停和单击事件执行其业务所需的所有值。查看 HTML5 自定义数据属性http://html5doctor.com/html5-custom-data-attributes/

更像这样的东西应该可以工作，并为调试布局问题（如果仍然存在）提供更合理的基础。

<?php
$i=1;
while($pack = mysql_fetch_array($packs)) {
    $pricepack = $price * $pack['refcount'];
    $pricepack = number_format($pricepack,2);

    if($users > $pack['refcount'] ) {
        $contents .= "
        <a class=\"refbutton\" data-pricepack=\"{$pricepack}\" style=\"text-decoration:none;\" >{$pack['refcount']}</a>";
        $i++;
    }
}  
?>

<div id="refinfo" style="display:none;">
    <span style="font-size:18pt;font-weight:bold;" id="refprice"></span><br />
    <span style="color:#D01F1E;">You don't have enough funds for this package.</span>
</div>

<script type="text/javascript">
    $(document).ready(function() {

        $('.refbutton')
            .bind('mouseover',function(event) {
                $('#refinfo').show();
                $('#refprice').text($(this).data("pricepack"));
            })
            .bind('click',function(event) {
                document.rent.refs.value=$(this).text();
            })
            .bind('mouseout', function(event){
                $('#refinfo').hide();
            })
        ;
    });
</script>