1

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

4

2 回答 2

1

@putvande 在评论中说的是对的，但你不一定需要“记住”任何东西——你可以从元素的id.

为此，请替换该行

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

和

$(this).html(this.id.substring(5));
于 2013-07-25T19:51:34.330 回答
1

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

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

在此处更新演示

于 2013-07-25T19:53:59.070 回答