jQuery离开悬停不显示正确的内容

我想通过模拟时钟作出选择时间。我现在的问题是，当我将鼠标悬停在小时分区上时。它应该在悬停时显示其他内容（现在文本为“悬停”），并在离开时返回小时文本（例如“10”）。问题是，离开时，所有的小时div被设置为文本“12”（脚本所做的最后一个div）。jQuery离开悬停不显示正确的内容

我不明白为什么它不按预期工作。也许你会呢？

下面是脚本：

'use strict' 

var d = 12; // number of hours 
var cx = 200; 
var cy = 200; 
var r = 40; 
var a = 2*Math.PI/d; // angle of one hour in radians 
var s = a*2; // Displace starting of the circle to fit a clock 
for(var i=0; i<d; i++) { 
    var x = Math.round(cx + r*Math.cos(a*i-s)); 
    var y = Math.round(cy + r*Math.sin(a*i-s)); 
    var ii = i+1; 
    var space = (ii<10 ? "&nbsp;":""); 
    $('.circle').append('<div class="slices" id="slice'+ii+'">'+space+ii+'</div>'); 
    $('#slice'+ii).css({left:x,top:y}).hover(
    function() { 
     $(this).html("Hovering"); 
    }, 
    function() { 
     $(this).html(space+ii); 
    } 
); 
}

要看到它的行动，看到http://plnkr.co/edit/ORuRyr?p=preview

来源

2013-07-25 EricC

这是因为在循环您正在更新你的'ii'和循环后为12。所以，当你悬停后更换您的HTML，你的'ii'是12并把它放进你的div中。当鼠标悬停在div上时，你需要“记住”HTML的内容，并在悬停时将其放回原处。 – putvande

什么@putvande在评论中说的是对的，但你不一定需要“记住”什么 - 你可以从元素的id中提取正确的数字。

要做到这一点，则更换线

$(this).html(space+ii);

与

$(this).html(this.id.substring(5));

来源

2013-07-25 19:51:34 gtmtg

唉！当然。感谢你们两位！ – EricC

@EricC好极了，没问题！ – gtmtg

声明一个变种跟踪悬停李和回调更换。

var text = ''; 
     $('#slice'+ii).css({left:x,top:y}).hover( 
     function() { 
      text = $(this).html(); 
      $(this).html("Hovering"); 
     }, 
     function() { 
      $(this).html(space+text); 
     } 
    );

更新演示here

来源

2013-07-25 19:53:59 SachinGutte

实际上甚至比接受的解决方案稍好一些，因为它使我的的数字小于10（请注意，“空间”不是必需的，因为它与最初的“ii” - 使用有相同的问题，但它不再需要，因为原始的div文本保存在变量文本中）。谢谢！ – EricC

@EricC只是一个关于接受答案的说明。 'this.id.substring（5）'也会起作用，比'.attr（）'或'.prop（）'快。 – SachinGutte

jQuery离开悬停不显示正确的内容

回答

相关问题