问一个关于选择li的问题

Question

本帖最后由 hebsxl2000 于 2012-09-06 12:12:00 编辑

Answer 1

<script type="text/javascript">
    $("#list li").each(function(i){
       (function(n){
           $("#list li").eq(n).hover(function(e){
               $("#s").attr("src","http://avatar.profile.csdn.net/0/3/E/2_hebsxl2000.jpg");//可以做动态图片
               //alert(n); 这个数字就是正常分别显示 0 1 2 3 关键是闭包作用
               $("#img1").css({left:e.pageX,top:e.pageY});
               $("#img1").show();
           },function(){
               $("#img1").hide();
           });
       })(i);
    });
</script>

Answer 2

    $("#list li").each(function(i){
        //上面的i即为每个li的索引序号。从0开始
        $(this).mouseover(function(){
            alert(i);
        })
    })

Answer 3

<script type="text/javascript">
var mouseX;
var mouseY;
var Div = document.getElementsByTagName("li");
function aaa(i){
Div[i].onmouseover=function(event)
        {
        //为什么在这里alert出来的i都是4呢
        alert(i);
        mouseX = event.clientX;
        mouseY = event.clientY;
        var infoDiv = document.getElementById("img1");
        var info = document.getElementById("s");
        info.src="img/text2.jpg";
        infoDiv.style.left = mouseX;
        infoDiv.style.top = mouseY;
        infoDiv.style.display = "block";
        }
    Div[i].onmouseout=function out()
    {
var infoDiv = document.getElementById('img1');
        infoDiv.style.display = "none";
    }
}
for(var i=0;i<Div.length;i++)
{
   aaa(i);    
}
</script>js部分这样改动也可以。试试看！

Answer 4

 <script type="text/javascript">
var mouseX;
  var mouseY;
  var Div = document.getElementsByTagName("li");  for(var i=0;i<Div.length;i++)
  {
       Div[i].onmouseover=(function(event,i)
        {
            alert(i);//现在应该不会一直是4了
            return function (){
                 mouseX = event.clientX;
                 mouseY = event.clientY;
                 var infoDiv = document.getElementById("img1");
                 var info = document.getElementById("s");
                 info.src="img/text2.jpg";
                 infoDiv.style.left = mouseX;
                 infoDiv.style.top = mouseY;
                 infoDiv.style.display = "block";
            }
        })(event,i);
       Div[i].onmouseout=function out()
       {
        var infoDiv = document.getElementById('img1');
        infoDiv.style.display = "none";
       }
   }
</script>