JQUERY 的一个小问题 求帮忙！！

一个提示框效果  鼠标放上去弹出的老是第一个  要求的效果是  要一一对应起来下面是js代码<script type="text/javascript">
    $(function () {
        var x = 10;
        var y = 20;
        $('.lh_s1').mouseover(function () {
            var tip = "<div id=\"tips\">" + $("#strtip").html() + "</div>";
            $('body').append(tip);
            $('#tips').show('fast');
         
        }).mouseout(function () {
            $('#tips').remove();
        }).mousemove(function (e) {
            $('#tips').css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" })
        })
    })
</script>下面是html代码 <li>
 <span class="red">4000</span>
 <span class="lh_s1"><div  id="strtip" style="display:none;">当&nbsp;&nbsp;前&nbsp;&nbsp;号&nbsp;&nbsp;码：400100120</br>每月最低消费：￥500 元</br>接听全国来电：￥0.15 元/分钟</div><a href="#" class="tip">100120</a>
 </span>
 </li>
 <li>
 <span class="red">4000</span>
 <span class="lh_s1"><div  id="strtip" style="display:none;">当&nbsp;&nbsp;前&nbsp;&nbsp;号&nbsp;&nbsp;码：400100110</br>每月最低消费：￥500 元</br>接听全国来电：￥0.15 元/分钟</div><a href="#" class="tip">100120</a>
 </span>
 </li>

解决方案 »

  1.   

    id只能唯一，重复的话只会取第一个。你可以改为获取它的子节点var tip = "<div id=\"tips\">" + $(this).children("div").html()+ "</div>";
      

  2.   

    <style type="text/css"> 
    body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
    }
    p{
    clear:both;
    margin:0;
    padding:.5em 0;
    }
    /* tooltip */
    #tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    display:none;
    }
    </style> 
    <script type="text/javascript"> 
    //<![CDATA[
    $(function(){
    $("a.tooltip").mouseover(function(e){
        var tooltip = "<div id='tooltip'>"+ this.title +"<\/div>"; //创建 div 元素
    $("body").append(tooltip); //把它追加到文档中
    $("#tooltip")
    .css({
    "top": e.pageY + "px",
    "left": e.pageX  + "px"
    }).show("fast");   //设置x坐标和y坐标，并且显示
        }).mouseout(function(){
    $("#tooltip").remove();   //移除 
        });
    });
    //]]>
    </script> 
    </head> 
    <body> 
    <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> 
    <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> 
    <p><a href="#" title="这是自带提示1.">自带提示1.</a></p> 
    <p><a href="#" title="这是自带提示2.">自带提示2.</a></p> 
    </body>