Question

我正在尝试通过模拟时钟进行选择。我目前的问题是，当我将鼠标悬停在小时div上时。它应该在悬停时显示其他内容（现在是文本“悬停”），并在离开时返回小时文本（例如“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);
    }
  );
}

要查看其实际效果，请参阅http://plnkr.co/edit/ORuRyr?p=preview

Answer 1

@putvande在评论中说的是对的，但你不一定需要“记住”任何东西 - 你只需从元素的id中提取正确的数字。

为此，请替换

行

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

带

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

Answer 2

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

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

更新为演示here

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

2 个答案: