jQuery在PHP中显示div而while循环

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>