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

我试图通过模拟时钟来选择时间。我当前的问题是，当我将鼠标悬停到hour-div时，它应该在悬停时显示其他内容（现在是文本“Hovering”），并在离开时返回到hour文本（例如“10”）。问题是，当离开时，所有小时div都被设置为文本“12”（脚本生成的最后一个div）

我不明白为什么它不能按预期的那样工作。也许是吧

以下是脚本：

'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);
    }
  );
}

“严格使用”
变量d=12；//小时数
var-cx=200；
var-cy=200；
var r=40；
变量a=2*Math.PI/d；//以弧度表示的一小时角
var s=a*2；//移动圆的起点以适合时钟
对于（var i=0；i来说，@putvande在注释中所说的是正确的，但是您不一定需要“记住”任何东西-您可以从元素的
id
中提取正确的数字

为此，请更换管路

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

与

声明一个var来跟踪悬停的li，并在回调时替换它

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

更新到demo
这是因为在循环中，你正在更新你的
ii
，循环后是12。因此，当你在悬停后替换HTML时，你的
ii
是12，并放入你的div中。你需要“记住”悬停div时HTML是什么，悬停出来时放回去。@Eric很好，没问题！Ac实际上甚至比公认的解决方案要好一点，因为它使my的数字小于10（请注意，不需要“空格”，因为它与最初的“ii”用法有相同的问题，但由于原始div文本保存在变量文本中，因此不再需要它）。谢谢！@EricC只是一个关于已接受答案的注释。
这个.id.substring（5）
也会起同样的作用，它比
.attr（）
或
.prop（）
快。
    var text = '';
      $('#slice'+ii).css({left:x,top:y}).hover(    
        function () {
          text = $(this).html();
          $(this).html("Hovering");
        },
        function () {
          $(this).html(space+text);
        }
      );